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:

<script src="https://code.iconify.design/2/2.0.4/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>

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.

Latest news

Many icons, one framework

Iconify icons collection includes over 100,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.

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.

  • Over 100,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.

Goal of Iconify is to offer unified icon framework for multiple platforms. Currently Iconify is available only as JavaScript library for browsers, React and Angular components.

If you use HTML or CSS syntax, Iconify loads icons from Iconify API. To use Iconify without relying on Iconify API there is possibility to host custom API and bundle icons with custom scripts.

Additionally you can copy or download SVG code. You can use it in editors (if you are using Sketch, check out Iconify plug-in for Sketch) or embed SVG directly into pages instead of using Iconify JavaScript.

See about page to learn more about Iconify and project goals.

License

Iconify SVG framework 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.