Modern replacement for glyph fonts

Over 30,000 vector icons for your website in one SVG framework.
New innovative approach to web icons. Fast, easy to use.

Iconify is innovative SVG framework that loads only icons that are used on your page. Load on demand feature makes it possible to offer thousands of icons without using lots of bandwidth.

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.

Iconify is very easy to use: add one <script> tag in head section of your document or before </body> to include Iconify:

<script src="//code.iconify.design/1/1.0.0-rc3/iconify.min.js"></script>

Then add icons to your page with simple code like this:

<span class="iconify" data-icon="fa:home"></span>
<span class="iconify" data-icon="noto:bird"></span>

Latest news

Many icons, one framework

Iconify icons collection includes over 30,000 icons from popular fonts and emoji sets: Font Awesome 4 and 5, Material Design Icons, IonIcons, Vaadin Icons, Entypo+ and many many more. 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.

  • 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" for inline icons that should be aligned slightly below baseline (just like glyph fonts), use iconify-icon tag for block icons used for decorations.

    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.

  • Over 30,000 icons to choose from

    One script to access thousands of icons from popular collections: FontAwesome, Material Design, Vaadin Icons, Emoji One, Twemoji, Icons8 sets and many more.

    You can use Iconify with custom and commercial icon sets too.

  • Lightning fast

    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

Browser compatibility

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.

License

Iconify is dual licensed under Apache 2.0 license and GPL 2.0 license. You may select, at your option, one of the above-listed licenses.

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.