Iconify vs SVG frameworks vs glyph fonts

There are several ways to handle web icons. Each has its advantages and disadvantages.

This document explains advantages and disadvantages of each method and compares it to Iconify.

Glyph fonts

You must be familiar with glyph fonts. Most popular one is FontAwesome that you must have heard of, but there are many other fonts.

Glyph fonts are very easy to use, which makes them popular.

Iconify is designed to include as many advantages of glyph fonts as possible, without any keeping any disadvantages.

Common features

Features that both fonts and Iconify have.

Ease of use

Main advantage of fonts over all SVG frameworks is fonts are very easy to use. Add stylesheet link to head section, add inline element such as i or span where you want to see icon. Iconify works exactly the same, except that instead of stylesheet link it uses script link.

CSS styling

Fonts are easy to style: set size by changing font-size, set color by changing text color.

Iconify is designed to work like that as well. In Iconify monotone icons use text color. Unless specified, height is set to 1em (width is calculated using width/height ratio of original icon). To change color you need to set text color and to change size you need to change font-size.

Advantages

Features that exist only in fonts.

Pseudo elements

Fonts can be used in stylesheets by adding pseudo elements:

.whatever:after {
    content: '\f015';
    font-family: FontAwesome;
}

Iconify can do that, but its harder.

Iconify API can generate SVG files that can be used as pseudo element's content or background images:

/* SVG as pseudo element's content */
.some-item:after {
    content: url('https://api.iconify.design/fa-home.svg?color=%23ba3329&height=16');
}

/* SVG as pseudo element's background image */
.another-item:after {
    content: '';
    width: 1em;
    height: 1em;
    display: inline-block;
    background: url('https://api.iconify.design/fa-home.svg?color=%23ba3329') no-repeat center center / contain;
}

/* SVG as background image */
.third-item {
    background: url('https://api.iconify.design/fa-home.svg?color=%23ba3329') no-repeat center center / contain;
}

Downsides of using external images are: each icon needs to be loaded separately and icon cannot inherit color from parent element, so color must be specified using "color" parameter. Avoid using this method if you can.

When using image as content URL (first block of code in example above), you also need to set image dimensions.

This is biggest advantage of fonts over Iconify that might make migration from fonts harder.

Text shadow

In fonts you can set text-shadow to add extra styling to icon. It is rarely used, but it is possible.

There is no such possibility with SVG icons and there is no alternative option. Browser treats SVG as block, adding box-shadow always results in square similar to border.

Disadvantages

Bad stuff in fonts that does not apply to Iconify.

Loading entire font

All visitors need to load entire fonts.

Its ok to have one font, but what if you want icons from different sources? Then visitors need to load multiple fonts or you need to use one of services that makes custom fonts. Visitors loading multiple fonts is not a good idea - it considerably slows down page loading time. You can use service to make custom font from icons you've picked from mulitple sources, but its not an easy task.

Therefore you designers are usually limited to just one collection, such as FontAwesome. Because of that FontAwesome is far more popular than any other font - nobody bothers with using multiple fonts because it slows page down.

No complex icons

You cannot have some things in fonts that you can have with SVG, such as colors, opacity, gradients, stroke.

Because of that icons designed for glyph fonts are simple solid shapes.

Bad rendering

Icons from glyph fonts are rendered as text, not as images. That means icon is displayed differently on different operating systems, sometimes even in different browsers on same operating system. Edges are blurred. Microsoft Windows is worst offender here - their aliasing methods add weird colors to edges of text. Apple OSX browsers render icons much better.

SVG are rendered as images. No fishy blurred edges, no mysterious colors.

For example this is FontAwesome's popular "fa-home" icon rendered using FontAwesome font and Iconify:

First 2 icons are made with FontAwesome font, last 2 icons are made with Iconify. One icon with font-size set to 14px because FontAwesome 4 is optimized for 14px, one icon with font-size set to 16px because that is mostly used height on modern pages.

There are mysterious blue, orange and red colors in first 2 samples.

Lets take a look at another example that includes several icons: "fa-align-justify" "fa-angle-right" "fa-bell-o" and "fa-thumbs-o-up" with 14px font size that FontAwesome 4 was optimized for:

First two samples are from browsers on Apple OSX. Its not pixel perfect, but because of superior aliasing method icons look close enough to what they are supposed to look.

Then there are 3 samples from different browsers on Windows. Those icons look terrible, which is a problem considering that vast majority of visitors on typical website that use desktop browsers use Windows.

Last sample is Iconify, it looks the same in all browsers on all operating systems. Icons are displayed exactly as they were designed.

Fonts and Iconify are both easy to use in HTML, but Iconify has 2 major advantages: pixel perfect rendering and bigger choice of icons, including multi color icons. Downside of Iconify is icons are not trivial to use in CSS compared to fonts.

SVG sprites

Some frameworks use SVG sprites.

Common features

Features that both SVG sprites and Iconify have.

  • Pixel perfect rendering.
  • Ease of use. With sprite all you have to do is write something like this: <svg><use xlink:href="sprite.svg#icon-name"></use></svg>

Advantages

SVG sprites do not require any scripts.

Disadvantages

  • Some older browsers do not support sprites: iOS Safari before iOS 9, all versions of Internet Explorer. Unfortunately there are enough users still using Internet Explorer, which makes sprites useless.
  • Entire sprite needs to be placed on same server as website because of cross-origin issues.
  • Entire sprite must be loaded. That means lots of wasted bandwidth to display few icons, just like with fonts.

Overall its not a bad solution, best of available SVG solutions, but everything it can do, Iconify can do too. Iconify offers hundreds of times more icons, while using less resources and supporting more browsers.

JavaScript SVG frameworks

There are several frameworks that use JavaScript to store and load icons. For example, FontAwesome 5.

Common features

Features that both FontAwesome 5 and Iconify have.

  • Pixel perfect rendering.
  • Ease of use.

Advantages

None. Everything those frameworks can do, Iconify can do too, while offering more icon choices, including icons offered by those frameworks (except for premium sets, but you can create your own instance of Iconify API to host them).

Disadvantages

JavaScript SVG frameworks load entire icon sets, just like SVG sprites and glyph fonts. It is even worse than fonts because its huge. For example, full FontAwesome 5 Pro SVG framework with all icons is 1.5Mb. Do you want to load 1.5Mb to display few icons and be tied to only one set of icons?

Iconify was designed to integrate best features of all other solutions, with as few downsides as possible. It was designed to offer bigger choice of icons without wasting resources and be customizable.

How is it possible? Iconify is a very complex solution. Other solutions have only 1 component: stuff to process in browser. Iconify has multiple components: client side script, API capable of serving only icons used on page and generating single SVG icons, tools for importing collections.

Main advantage of Iconify is you can use it with all collections and your own icons. Whatever solution collection authors have come up with, Iconify is better because you are not limited to icons from that one collection. You can use all popular collections, you can use premium collections, you can use it with your own icons.

However Iconify is not perfect, it has a downside that fonts and other frameworks do not - caching.

Caching

Because of dynamic nature of API requests and responses it is hard to cache icons with Iconify. Each page might have different icons in different order.

Iconify improves performance by:

  • Optimizing API requests
  • Loading icons from server closest to visitor
  • Caching icons in sessionStorage (option to use localStorage is also available, but it is disabled by default)
  • There is possibility to create bundles (this option is used on this website)

Browser caching in Iconify

Usually Iconify doesn't send only one request to API, it splits icons into multiple requests based on icon prefix, length of query and it also sorts icons to make sure order is always the same. As result API queries are often the same for different pages on same website, which means browser can cache API response.

If your pages have different icons or if icons are dynamically generated, you can optimize icon delivery using these methods:

  • You can tell Iconify to preload icons. You should do that when content is dynamically generated, such as React/Angular application, so Iconify would pre-fetch all necessary icons in bulk: <script>
      Iconify.preloadImages(['mdi:home', 'mdi:alert', 'emojione:cat', 'flat-color-icons:print', 'flat-color-icons:like']);
    </script>
  • You can make preload package. Bonus of using preload package is you can append it to your website's scripts file.

CDN caching

Usual CDN caching is not possible with Iconify. Content is different for each request, there are unlimited number of possible combinations. That makes all existing CDN services useless for hosting Iconify API.

Iconify API is hosted on custom content delivery network. Current network consists of 8 servers across the globe. DNS is handled by AWS Route53 latency routing, which routes visitors to server with lowest latency.

Ideally network should have more redundancies and points of presence, but that would mean very expensive infrastructure. If you are worried about reliability, you can host icons yourself without relying on Iconify API.

sessionStorage and localStorage

When Iconify retrieves icons from API, it stores icons in browser storage.

When visitor navigates to different page on website, Iconify loads icons from storage instead of requesting those icons from API.

By default sessionStorage is enabled, localStorage is disabled. That means storage is reset each time visitor closes browser window. You can enable localStorage, which keeps icons in browser cache for longer period of time, but in some countries that requires visitor to accept cookies, so localStorage option is disabled by default.

To toggle localStorage use this code after including Iconify script:

<script>
  Iconify.setConfig('localStorage', true);
</script>

To toggle sessionStorage use same code, but replace 'localStorage' with 'sessionStorage'.