DOCSEARCHbyAlgolia
Submit Docs

Ionicons

repository·main·Indexed 12 days ago

https://github.com/ionic-team/ionicons

An open-source icon set featuring over 1,300 icons for web, iOS, Android, and desktop applications. Version 8.0.13 provides the <ion-icon> web component with support for platform-specific variants (Material Design and iOS), custom SVG assets, and visual styles including filled, outline, and sharp variants.

Tokens
4.5K
Snippets
21
Records
24
Agent score
97%

What's inside Ionicons

  1. Use icon variants (filled, outline, sharp)

    main

    Ionicons provides three visual variants for most icons to match different platform design languages:

    • Filled: The default variant (use the base name).
    • Outline: Use the -outline suffix.
    • Sharp: Use the -sharp suffix.

    Note: Logo icons do not have outline or sharp variants.

    <ion-icon name="heart"></ion-icon> <!--filled-->
<ion-icon name="heart-outline"></ion-icon> <!--outline-->
<ion-icon name="heart-sharp"></ion-icon> <!--sharp-->

  2. How to update icons in the repository

    main
    The src/svg directory is the single source of truth for all icons. You can place original SVG exports directly from an SVG editor into this directory without prior optimization. The build process will handle optimization (removing comments, reducing size, etc.) to ensure compatibility with the ion-icon component.

  3. Build Ionicons locally

    main

    To optimize icons and generate distribution files after adding, updating, or deleting SVGs in the src/svg directory, run the build command. This process optimizes all source SVGs (removing comments, reducing size, etc.) and saves the optimized versions to dist/ionicons/svg. The dist directory will also contain the distribution files for the ion-icon web component.

    npm run build

  4. Adjust icon size

    main

    You can control the size of an icon in two ways:

    1. Pre-defined sizes: Use the size attribute with values small or large.
    2. Custom size: Apply the CSS font-size property to the <ion-icon> component. It is recommended to use multiples of 8 (e.g., 8, 16, 32, 64) for optimal visual results.
    <ion-icon size="small"></ion-icon>
<ion-icon size="large"></ion-icon>
    ion-icon {
  font-size: 64px;
}

  5. Install Ionicons Web Component

    main

    If you are not using the Ionic Framework, you can enable the Ionicons Web Component by adding the loader scripts to your HTML. Place these scripts near the end of your <body> tag, just before the closing tag. You can use @latest or specify a specific version (e.g., @8.0.0).

    <script type="module" src="https://esm.sh/ionicons@latest/loader"></script>
<script nomodule src="https://esm.sh/ionicons@latest/loader"></script>

  7. How icon registration and naming works

    main

    Ionicons uses a global map to resolve icon names to their actual SVG data or asset paths. When you call addIcons(), the library performs the following:

    1. Mapping: It stores the icon data in a global Ionicons.map.
    2. Kebab-case conversion: For every icon provided, it generates a kebab-case version of the name. For example, an icon named addCircleOutline will be registered as both addCircleOutline and add-circle-outline.
    3. Conflict Detection: If you attempt to map different icon data to the same name, a warning is logged: [Ionicons Warning]: Multiple icons were mapped to name "{name}". Ensure that multiple icons are not mapped to the same icon name.

  8. Handle RTL flipping for arrows and chevrons

    main
    The <ion-icon> component automatically detects if an icon name contains arrow or chevron. If it does, the component applies a flip-rtl class to handle horizontal flipping in Right-to-Left (RTL) layouts. You can disable this automatic behavior by setting flipRtl={false}.

  9. Specify platform-specific icons

    main

    When working within the Ionic Framework, you can define different icons for iOS and Material Design (Android) using the ios and md attributes.

    <ion-icon ios="heart-outline" md="heart-sharp"></ion-icon>

  10. Use custom SVG icons

    main

    To use an external SVG file instead of a built-in icon, use the src attribute. The URL must be accessible from the webpage. Note that the SVG must be valid and cannot contain scripts or events.

    <ion-icon src="/path/to/external/file.svg"></ion-icon>