Guide · Open source
How to use ionicons: add icons to web and Ionic apps
Updated · written with AI from the project's own documentation and checked against our catalogue data
Ionicons is a free, MIT-licensed icon set of about 1,300 icons, built for web, iOS, Android and desktop apps. It was made for Ionic Framework, but the README says it can be used anywhere. This guide shows you how to load it, place icons on a page, choose a style variant, and size and colour them.
Ioniconsionic-team/ionicons · ★ 18.2k · MIT Install options & downloads Quick start
- 1Load the script. Add the Ionicons loader script before the closing body tag, or skip this if you use Ionic Framework.
- 2Add an ion-icon element. Place an ion-icon element in your markup and set its name attribute.
- 3Pick a variant. Add the -outline or -sharp suffix to the name, or leave it plain for the filled style.
- 4Set size and colour. Use the size attribute or a font-size CSS rule, and set color in CSS.
- 5Check the result in your browser. Confirm the icon appears. Remember that icons are fetched only when they are visible on screen.
Load Ionicons in your project
If you use Ionic Framework, Ionicons is packaged by default, so you do not need to install anything extra.
To use Ionicons without Ionic Framework, add the following script near the end of your page, right before the closing </body> tag. The first line is for modern browsers and the second is a fallback.
- Replace latest with a specific version number if you want to pin the icon set.
<script type="module" src="https://esm.sh/ionicons@latest/loader"></script>
<script nomodule src="https://esm.sh/ionicons@latest/loader"></script>Add your first icon with ion-icon
To show a built-in icon, put an ion-icon element in your page and set its name attribute to the icon's name. The README uses heart as its example.
<ion-icon name="heart"></ion-icon>Choose filled, outline or sharp variants
Each app icon has a filled, outline and sharp variant. The filled variant uses the plain name, while the other two add a suffix. Logo icons do not have outline or sharp variants.
In Ionic Framework you can also pick a different icon per platform with the md and ios attributes.
- Filled: name="heart"
- Outline: name="heart-outline"
- Sharp: name="heart-sharp"
<ion-icon ios="heart-outline" md="heart-sharp"></ion-icon>Change icon size and colour
For quick sizes, use the size attribute with small or large. For an exact size, set font-size in CSS. The README suggests pixel sizes that are multiples of 8, such as 8, 16, 32 or 64.
Set the colour with the color CSS property on ion-icon.
ion-icon {
font-size: 64px;
color: blue;
}Adjust the stroke width of outline icons
When you use an outline variant, you can change its stroke width to balance it against the icon size or nearby text. Set the --ionicon-stroke-width CSS custom property. The default is 32px.
ion-icon {
--ionicon-stroke-width: 16px;
}Use your own SVG icon
To show a custom icon, set the src attribute to the URL of an SVG file. The URL must be reachable from the page. The file must be a valid SVG and cannot contain scripts or event handlers.
To load your own named set instead, you can call setAssetPath and addIcons from the ionicons package, as shown in the README.
- Use src for a single external SVG file.
- Use setAssetPath to point Ionicons at a different folder of SVGs.
<ion-icon src="/path/to/external/file.svg"></ion-icon>What people use it for
- Adding a heart, save or add button icon to a web page without installing a package.
- Showing platform-appropriate icons in an Ionic app using the md and ios attributes.
- Styling outline icons with a custom stroke width to match nearby text.
- Displaying your own SVG logo or graphic with the src attribute.
Frequently asked questions
Is ionicons free to use commercially?
Yes. The README says the icons are free to use for personal or commercial purposes and are licensed under the MIT license. Brand icons are trademarks of their owners, and using them does not mean the trademark holder endorses your project.
Do I need to install anything to use ionicons?
If you use Ionic Framework, Ionicons is included by default. Otherwise, the README shows you can load it with a script tag from esm.sh, and the source lists no other prerequisites.
How do I use ionicons without Ionic Framework?
Add the module and nomodule script tags from the README near the end of your page, before the closing body tag. Then place ion-icon elements with a name attribute in your HTML.
Why does my ionicon not show offline?
The component fetches each SVG when the icon becomes visible, so icons need a network connection the first time they load. The README does not describe an offline mode, so do not rely on it for offline use.
Can I change the color and size of ionicons?
Yes. Set the color CSS property on ion-icon for colour, and use font-size or the size attribute for size. The README suggests pixel sizes that are multiples of 8.
How do ionicons compare to Font Awesome or Feather Icons?
Ionicons was built for Ionic Framework and includes separate iOS and Material Design versions of most icons. The source does not compare its icon count or quality with other sets, so check each set's own documentation for those details.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Ionicons suits developers building Ionic apps, or web developers who want a free MIT-licensed icon set with iOS and Material style variants. It is less suitable if you need a specific brand or illustration style outside this pack, or if your icons must load instantly offline.
Install options & downloads