ionicons Documentation

1. Project Overview & Quickstart (ionic-team/ionicons) Copy Chapter

File: README.md Copy Chapter

Ionicons

Ionicons is a completely open-source icon set with 1,300 icons crafted for web, iOS, Android, and desktop apps. Ionicons was built for Ionic Framework, so icons have both Material Design and iOS versions.

Note: All brand icons are trademarks of their respective owners. The use of these trademarks does not indicate endorsement of the trademark holder by Ionic, nor vice versa.

We intend for this icon pack to be used with Ionic, but it’s by no means limited to it. Use them wherever you see fit, personal or commercial. They are free to use and licensed under MIT.

Contributing Copy Chapter

Thanks for your interest in contributing! Read up on our guidelines for
contributing
and then look through our issues with a help wanted
label.

Using the Web Component Copy Chapter

The Ionicons Web Component is an easy and performant way to use Ionicons in your app. The component will dynamically load an SVG for each icon, so your app is only requesting the icons that you need.

Also note that only visible icons are loaded, and icons that are "below the fold" and hidden from the user's view do not make fetch requests for the svg resource.

Installation Copy Section

If you're using Ionic Framework, Ionicons is packaged by default, so no installation is necessary. Want to use Ionicons without Ionic Framework? Place the following <script> near the end of your page, right before the closing `` tag, to enable them.

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

you can replace latest to pick any version of Ionicon, e.g.:

<script type="module" src="https://esm.sh/[email protected]/loader"></script>
<script nomodule src="https://esm.sh/[email protected]/loader"></script>

Basic usage Copy Section

To use a built-in icon from the Ionicons package, populate the name attribute on the ion-icon component:

Custom icons Copy Section

To use a custom SVG, provide its url in the src attribute to request the external SVG file. The src attribute works the same as `` in that the url must be accessible from the webpage that's making a request for the image. Additionally, the external file can only be a valid svg and does not allow scripts or events within the svg element.

Custom Asset Path

If you have a different set of icons you would like to load or if the Ionicon icons are hosted on a different page or path, you can set the asset url from which Ionicons pulls the icons via:

import { setAssetPath, addIcons } from 'ionicons';
import { add, logoIonic, save } from 'ionicons/icons';

// set root path for loading icons to "<root>/public/svg"
setAssetPath(`${window.location.origin}/public/svg/`);

// only load specific icons
addIcons({ add, logoIonic, save });

This allows the use of named icons like this:

Variants Copy Chapter

Each app icon in Ionicons has a filled, outline and sharp variant. These different variants are provided to make your app feel native to a variety of platforms. The filled variant uses the default name without a suffix. Note: Logo icons do not have outline or sharp variants.

Platform specificity Copy Section

When using icons in Ionic Framework you can specify different icons per platform. Use the md and ios attributes and provide the platform-specific icon/variant name.

Size Copy Chapter

To specify the icon size, you can use the size attribute for our pre-defined font sizes.

Or you can set a specific size by applying the font-size CSS property on the ion-icon component. It's recommended to use pixel sizes that are a multiple of 8 (8, 16, 32, 64, etc.)

ion-icon {
  font-size: 64px;
}

Color Copy Chapter

Specify the icon color by applying the color CSS property on the ion-icon component.

ion-icon {
  color: blue;
}

Stroke width Copy Chapter

When using an outline icon variant it is possible to adjust the stroke width, for improved visual balance relative to the icon's size or relative to the width of adjacent text. You can set a specific size by applying the --ionicon-stroke-width CSS custom property to the ion-icon component. The default value is 32px.

ion-icon {
  --ionicon-stroke-width: 16px;
}

Migrating from v4 Copy Chapter

See the 5.0 release notes for a list of icon deletions/renames.

License Copy Chapter

Ionicons is licensed under the MIT license.

Related Copy Chapter

• Ionicons Homepage
• Ionic Framework
• Ionic Discord
• Ionic Forum
• Stencil
• Capacitor

File: Readme.md Copy Chapter

Ionicons

Ionicons is a completely open-source icon set with 1,300 icons crafted for web, iOS, Android, and desktop apps. Ionicons was built for Ionic Framework, so icons have both Material Design and iOS versions.

Note: All brand icons are trademarks of their respective owners. The use of these trademarks does not indicate endorsement of the trademark holder by Ionic, nor vice versa.

We intend for this icon pack to be used with Ionic, but it’s by no means limited to it. Use them wherever you see fit, personal or commercial. They are free to use and licensed under MIT.

Contributing Copy Chapter

Thanks for your interest in contributing! Read up on our guidelines for
contributing
and then look through our issues with a help wanted
label.

Using the Web Component Copy Chapter

The Ionicons Web Component is an easy and performant way to use Ionicons in your app. The component will dynamically load an SVG for each icon, so your app is only requesting the icons that you need.

Also note that only visible icons are loaded, and icons that are "below the fold" and hidden from the user's view do not make fetch requests for the svg resource.

Installation Copy Section

If you're using Ionic Framework, Ionicons is packaged by default, so no installation is necessary. Want to use Ionicons without Ionic Framework? Place the following <script> near the end of your page, right before the closing `` tag, to enable them.

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

you can replace latest to pick any version of Ionicon, e.g.:

<script type="module" src="https://esm.sh/[email protected]/loader"></script>
<script nomodule src="https://esm.sh/[email protected]/loader"></script>

Basic usage Copy Section

To use a built-in icon from the Ionicons package, populate the name attribute on the ion-icon component:

Custom icons Copy Section

To use a custom SVG, provide its url in the src attribute to request the external SVG file. The src attribute works the same as `` in that the url must be accessible from the webpage that's making a request for the image. Additionally, the external file can only be a valid svg and does not allow scripts or events within the svg element.

Custom Asset Path

If you have a different set of icons you would like to load or if the Ionicon icons are hosted on a different page or path, you can set the asset url from which Ionicons pulls the icons via:

import { setAssetPath, addIcons } from 'ionicons';
import { add, logoIonic, save } from 'ionicons/icons';

// set root path for loading icons to "<root>/public/svg"
setAssetPath(`${window.location.origin}/public/svg/`);

// only load specific icons
addIcons({ add, logoIonic, save });

This allows the use of named icons like this:

Variants Copy Chapter

Each app icon in Ionicons has a filled, outline and sharp variant. These different variants are provided to make your app feel native to a variety of platforms. The filled variant uses the default name without a suffix. Note: Logo icons do not have outline or sharp variants.

Platform specificity Copy Section

When using icons in Ionic Framework you can specify different icons per platform. Use the md and ios attributes and provide the platform-specific icon/variant name.

Size Copy Chapter

To specify the icon size, you can use the size attribute for our pre-defined font sizes.

Or you can set a specific size by applying the font-size CSS property on the ion-icon component. It's recommended to use pixel sizes that are a multiple of 8 (8, 16, 32, 64, etc.)

ion-icon {
  font-size: 64px;
}

Color Copy Chapter

Specify the icon color by applying the color CSS property on the ion-icon component.

ion-icon {
  color: blue;
}

Stroke width Copy Chapter

When using an outline icon variant it is possible to adjust the stroke width, for improved visual balance relative to the icon's size or relative to the width of adjacent text. You can set a specific size by applying the --ionicon-stroke-width CSS custom property to the ion-icon component. The default value is 32px.

ion-icon {
  --ionicon-stroke-width: 16px;
}

Migrating from v4 Copy Chapter

See the 5.0 release notes for a list of icon deletions/renames.

License Copy Chapter

Ionicons is licensed under the MIT license.

Related Copy Chapter

• Ionicons Homepage
• Ionic Framework
• Ionic Discord
• Ionic Forum
• Stencil
• Capacitor

File: readme.md Copy Chapter

Ionicons

Ionicons is a completely open-source icon set with 1,300 icons crafted for web, iOS, Android, and desktop apps. Ionicons was built for Ionic Framework, so icons have both Material Design and iOS versions.

Note: All brand icons are trademarks of their respective owners. The use of these trademarks does not indicate endorsement of the trademark holder by Ionic, nor vice versa.

We intend for this icon pack to be used with Ionic, but it’s by no means limited to it. Use them wherever you see fit, personal or commercial. They are free to use and licensed under MIT.

Contributing Copy Chapter

Thanks for your interest in contributing! Read up on our guidelines for
contributing
and then look through our issues with a help wanted
label.

Using the Web Component Copy Chapter

The Ionicons Web Component is an easy and performant way to use Ionicons in your app. The component will dynamically load an SVG for each icon, so your app is only requesting the icons that you need.

Also note that only visible icons are loaded, and icons that are "below the fold" and hidden from the user's view do not make fetch requests for the svg resource.

Installation Copy Section

If you're using Ionic Framework, Ionicons is packaged by default, so no installation is necessary. Want to use Ionicons without Ionic Framework? Place the following <script> near the end of your page, right before the closing `` tag, to enable them.

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

you can replace latest to pick any version of Ionicon, e.g.:

<script type="module" src="https://esm.sh/[email protected]/loader"></script>
<script nomodule src="https://esm.sh/[email protected]/loader"></script>

Basic usage Copy Section

To use a built-in icon from the Ionicons package, populate the name attribute on the ion-icon component:

Custom icons Copy Section

To use a custom SVG, provide its url in the src attribute to request the external SVG file. The src attribute works the same as `` in that the url must be accessible from the webpage that's making a request for the image. Additionally, the external file can only be a valid svg and does not allow scripts or events within the svg element.

Custom Asset Path

If you have a different set of icons you would like to load or if the Ionicon icons are hosted on a different page or path, you can set the asset url from which Ionicons pulls the icons via:

import { setAssetPath, addIcons } from 'ionicons';
import { add, logoIonic, save } from 'ionicons/icons';

// set root path for loading icons to "<root>/public/svg"
setAssetPath(`${window.location.origin}/public/svg/`);

// only load specific icons
addIcons({ add, logoIonic, save });

This allows the use of named icons like this:

Variants Copy Chapter

Each app icon in Ionicons has a filled, outline and sharp variant. These different variants are provided to make your app feel native to a variety of platforms. The filled variant uses the default name without a suffix. Note: Logo icons do not have outline or sharp variants.

Platform specificity Copy Section

When using icons in Ionic Framework you can specify different icons per platform. Use the md and ios attributes and provide the platform-specific icon/variant name.

Size Copy Chapter

To specify the icon size, you can use the size attribute for our pre-defined font sizes.

Or you can set a specific size by applying the font-size CSS property on the ion-icon component. It's recommended to use pixel sizes that are a multiple of 8 (8, 16, 32, 64, etc.)

ion-icon {
  font-size: 64px;
}

Color Copy Chapter

Specify the icon color by applying the color CSS property on the ion-icon component.

ion-icon {
  color: blue;
}

Stroke width Copy Chapter

When using an outline icon variant it is possible to adjust the stroke width, for improved visual balance relative to the icon's size or relative to the width of adjacent text. You can set a specific size by applying the --ionicon-stroke-width CSS custom property to the ion-icon component. The default value is 32px.

ion-icon {
  --ionicon-stroke-width: 16px;
}

Migrating from v4 Copy Chapter

See the 5.0 release notes for a list of icon deletions/renames.

License Copy Chapter

Ionicons is licensed under the MIT license.

Related Copy Chapter

• Ionicons Homepage
• Ionic Framework
• Ionic Discord
• Ionic Forum
• Stencil
• Capacitor

File: scripts/readme.md Copy Chapter

Development and Build Scripts

Updating Icons Copy Chapter

The src/svg directory is the single source of truth for svgs. They should not already be optimized and can be the original svg export straight out of an svg editor. A build step before releasing will optimize the source svgs (remove comments, reduce the size, etc) and ensure they'll work within ion-icon.

Build Locally Copy Chapter

After an svg has been updated, added or deleted from the src/svg directory, run:

npm run build

The build command will optimize all of the icons and generate the files to be distributed. After the build command, all of the optimized svgs are saved in dist/ionicons/svg. Additionally the dist directory contains the distribution files for the ion-icon web component.

Svg Symbols Cheatsheet Copy Chapter

After a build, a new www/cheatsheet.html file will be created. This version uses svg symbols rather than ion-icon.

ion-icon Component Preview Copy Chapter

To see the ion-icon component in action, run:

npm start

Release Steps Copy Chapter

Releases are automated via GitHub Actions. To trigger a release:

1. Go to the Release Orchestrator workflow
2. Click "Run workflow"
3. Select the release type:
   • dev — Creates a pre-release with a timestamp-based version (e.g., 8.0.14-dev.11784821417.1c794397)
   • production — Creates a semver release; select patch, minor, or major
4. The workflow will build, publish to NPM, and create a GitHub release (for production releases)

File: src/components/icon/readme.md Copy Chapter

ion-icon

Properties Copy Chapter

Built with StencilJS

2. Official Technical Reference & Guides (ionic-team/docs) Copy Chapter

File: packages/theme-classic/lib/theme/README.md Copy Chapter

Theme folder

This folder is used to override the base docusaurus theme. It houses swizzled components. Components should NOT be swizzled unless absolutely necessary to allow for changes in future versions. If it is possible to shallow swizzle a component using the @theme-original alias, then that should be heavily considered. Swizzled components should be added to the prettier ignore and all code updates should be marked with comments to allow more seamless version updating. The styles file for components that have been unsafely swizzle should absolutely not be edited. All styling should be done from the component partials.

File: packages/theme-classic/src/styles/components/README.md Copy Chapter

Components folder

This folder is used to style components that are used globally across the site. A good way to setup a file is to include any themed variables at the top, and the override styles below that. All these partials are imported into the base styles with the sass @use rule.

Light themed variables can be targeted using the following selector:

html[data-theme='light'] {
  --ifm-menu-color-background-active: red;
}

Dark themed variables can be targeted using the following selector:

html[data-theme='dark'] {
  --ifm-menu-color-background-active: blue;
}

Global variables can be overridden at root like this:

:root {
  --sidebar-spacing-horizontal: 1.5rem;
}

Styles can be overriden like this:

#__docusaurus {
  .class-to-override {
    margin-block-start: 1rem;
  }
}

File: packages/theme-classic/src/styles/README.md Copy Chapter

Styles folder

This folder houses a global style file that is brought into the theme in docusaurus.config.js. In addition, there is a components folder that is used to style theme components instead of swizzling them.

Related issue: https://github.com/facebook/docusaurus/pull/5987 Since theme styles cannot be overridden at the moment, the base #__docusaurus tag is being used to +1 the specificity of selectors.

File: packages/theme-classic/src/theme/README.md Copy Chapter

Theme folder

This folder is used to override the base docusaurus theme. It houses swizzled components. Components should NOT be swizzled unless absolutely necessary to allow for changes in future versions. If it is possible to shallow swizzle a component using the @theme-original alias, then that should be heavily considered. Swizzled components should be added to the prettier ignore and all code updates should be marked with comments to allow more seamless version updating. The styles file for components that have been unsafely swizzle should absolutely not be edited. All styling should be done from the component partials.

File: packages/preset-classic/README.md Copy Chapter

`@docusaurus/preset-classic`

Classic preset for Docusaurus.

Usage Copy Chapter

See presets documentation.