Ionicons
A free, MIT-licensed set of 1,300 icons for web and mobile apps, built for Ionic.
- Stars
- 18.2k
- Forks
- 2k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 3 months ago
- Type
- Library
What it is
Ionicons is an open-source icon set with about 1,300 icons, made for web, iOS, Android, and desktop apps. It was built for Ionic Framework, so most icons come in Material Design and iOS versions. You use it by placing an ion-icon element in your page and setting its name, and the icon's SVG is loaded on demand.
- Add a heart or save icon to a web page with a single ion-icon tag
- Use outline, filled, or sharp variants to match different visual styles
- Load a custom SVG file into the same ion-icon component
- Set icon size and color with plain CSS
Great for
- Developers building apps with Ionic Framework, where icons are already packaged
- Web developers who want a free icon set without installing a package
- Projects that need separate iOS and Material Design icon styles
- Teams that want MIT-licensed icons usable in commercial work
Not ideal for
- People who need a very specific brand or illustration style not covered by the set, since the README only describes this one icon pack
- Projects that need icons to load instantly offline, because the component fetches each SVG when it becomes visible
- Anyone who needs brand logos cleared for endorsement, since the README notes brand icons are trademarks of their owners
How to get it
- 1
Use it in the browser (or self-host)
Load Ionicons without Ionic Framework (CDN script, module version)
<script type="module" src="https://esm.sh/ionicons@latest/loader"></script>Load Ionicons without Ionic Framework (CDN script, nomodule fallback)
<script nomodule src="https://esm.sh/ionicons@latest/loader"></script> - 2
Run it
- If you use Ionic Framework, skip installation because Ionicons is already included.
- Otherwise, add the module and nomodule script tags near the end of your page, before the closing body tag.
- Add an icon with <ion-icon name="heart"></ion-icon>.
- Try the outline variant with name="heart-outline" to confirm variants work.
- 3
Get the most out of it
- Use setAssetPath and addIcons to load only the icons you need from your own server, as shown in the README.
- Pin a specific version such as ionicons@8.0.0 in the script URL instead of latest for stable builds.
- Adjust --ionicon-stroke-width on outline icons to match nearby text weight.
- Use the ios and md attributes to show a different icon on each platform in Ionic apps.
Downloads
Strengths
- Free and MIT-licensed, including for commercial use according to the README
- Each icon has filled, outline, and sharp variants in most cases
- Icons are loaded only when visible, which the README says keeps requests down
Trade-offs
- The README is short on details about the full icon list and browser support
- Logo icons lack outline and sharp variants
- Using it outside Ionic requires loading scripts from a CDN, which adds an external dependency
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| ionicons (this) | 18.2k | Library | beginner | 3 months ago | Developers building apps with Ionic Framework, where icons are already packaged |
| tabler-icons | 22.5k | App | beginner | 7 days ago | Web developers who need a consistent set of icons for buttons, menus, and dashboards |
| ionic-framework | 52.7k | Library | intermediate | 4 days ago | Web developers who want to build mobile apps using existing web skills |
| feather | 26k | Library | beginner | 1.7 years ago | Web developers who want a clean set of line icons without designing their own |
| shoelace | 13.8k | Library | intermediate | 6 months ago | Developers maintaining an existing site that already uses Shoelace |
| devicon | 11.9k | Library | beginner | 4 days ago | Web developers who want language or tool logos on a site or README |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.