Modern SVG framework

One library, over 40,000 vector icons.
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.

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/1/1.0.3/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 40,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" 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 40,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.

Integration

Currently Iconify is available only as JavaScript library for browsers and React component.

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 or use Iconify for React.

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.

There are no native components yet for frameworks except React.

Plan is to create dedicated components for more frameworks in first half of 2019. What will be different from using current Iconify JavaScript? It will be proper components that generate SVG, not placeholders and generated bundle will include all SVG data. It will not require Iconify JavaScript and will not rely on Iconify API. Of course you can continue using current placeholder syntax if you prefer. All integration methods planned for future will add new options, not replace existing options.

Additionally integration is being developed for XenForo 2 forum software. It features icon picker component that includes icon search, custom option and style property types, custom XenForo template tags, making it easy to add icon pickers to third party styles and add-ons.

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.