Unified icons framework
One library, over 100,000 vector icons.
Modern replacement for icon fonts. Fast, easy to use.
There are many excellent icon sets available. Each has its own custom syntax, some are available only as fonts and almost all of them load entire set even if you are displaying just few icons.
Iconify tries to combine all those icon sets. Iconify is a unified open source icon framework that makes it possible to use many icons from different icon sets on same page or in same application using one syntax.
Iconify combines pixel perfect rendering of SVG with ease of use of glyph fonts, while offering more choice than any glyph font or SVG framework.
You can use Font Awesome, Material Design Icons, Unicons, Dashicons and many other icon sets on same page or application using one syntax.
How to use Iconify
Iconify is very easy to use: add one <script> tag in head section of your document or before </body> to include Iconify:
Then add icons to your page with simple code like this:
<span class="iconify" data-icon="noto:bird"></span>
If you do not want to use script, Iconify is available as React, Vue, Svelte and Ember components. Also there are tools available for developers to render SVG (for PHP, for Node) and to convert icons.
Many icons, one framework
Iconify icons collection includes over 100,000 icons from popular fonts and emoji sets: You can use them all on same page without loading multiple glyph fonts. Only icons used on page will be loaded instead of entire fonts.
Icon designers can publish their own icon sets too. Iconify offers open source tools to clean up and publish custom icon sets.
Load on demand
Fonts and other SVG frameworks load entire collections. Even if you are using only 10-20 icons, your visitors are forced to load them all.
Iconify works differently. Very differently! Iconify loads only icons used on page. Icons are loaded as external resources that are cached by browser, not embedded into each page. No other SVG framework can do that.
What is advantage of this unique approach to handling icons? You are no longer limited to one collection. You can use them all on same page without having to load megabytes of data!
See icon collections page for list of available icons.
Easy to use
Syntax is similar to glyph fonts. Write a placeholder element, Iconify will replace it with SVG.
Use span or i or any other HTML tag with class="iconify". If you want an icon to behave like text, aligned slightly below baseline, use class="iconify-inline".
Icons are easy to style with CSS: size is set by font-size, color for monotone icons is set by text color. Just like glyph fonts.
Do not forget to add Iconify script tag in head section of your document or before </body>!
See how to use Iconify tutorial.
Icons are loaded from Iconify API in bulk, reducing number of queries. Script is small and fast. Placeholders are replaced with SVG images in fraction of second.
Iconify API is hosted on network of servers spread across the globe. Visitors are always connected to closest server, reducing loading time to fraction of second.
If you want to, you can create your own Iconify API server!
How does it work?
Script looks for icon placeholders.
See how to use Iconify tutorial.
Script retrieves icon names from placeholders.
Script connects to Iconify API and retrieves SVG data for all icons found on page.
Iconify API is hosted on network of servers spread across the world, so data would load in fraction of a second from any location.
Script replaces placeholders with SVG.
More detailed description is available in documentation.
Browse all available collections
Brands / Social
Iconify supports all modern browsers.
Older browsers that are supported:
- Internet Explorer 9 and newer.
- iOS Safari for iOS 8 and newer.
- Opera Mini and UC Browser are not supported.
IE 9, 10 and iOS 8 Safari do not support some modern functions that Iconify relies on. Iconify will automatically load polyfills for those browsers. All newer browsers do not require those polyfills.
See about page to learn more about Iconify and project goals.
Apache 2.0 license allows pretty much anything, including commercial use.
GPL 2.0 license allows use with more restrictive popular open source projects.
This license does not apply to icons. Icons are released under different licenses, see each collection for details. Icon collections available by default are all licensed under some kind of open source or free license, making it possible to use them in Iconify project.