Are we done with icon fonts yet?

It seemed like a good idea at the time: wingdings for the web, collections of vector glyphs that are easy to include in your pages. Except that a web page is not a Word document. Now that SVG is properly supported by all half-decent browsers (you don’t have to support browsers and OS’s that Microsoft won’t, do you?), why are we still using icon fonts? Let’s recap.

In the case of Font Awesome, you’d be first including the style sheet:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

That’s 28kB. Oh but that’s all right, it’s on a CDN, right? Well, first hits count.

Then, the style sheet will download the font itself. That’s 55kB in the case the woff file gets used.

Finally, you can start adding icons using those i tags:

<i class="fa fa-camera-retro"></i>

I tags, where of course, the i does not stand for “icon”, but for italic, for “a range of text that is set off from the normal text”. I think we should all prefer our images to be specified by image tags rather than italic tags.

If you’re using only a few of the icons in Font Awesome, the overhead is hard to justify, especially when compared with SVG. Let’s compare for a simple page: the Font Awesome “get started” page.

That page probably makes use of more icons than your typical page, so the comparison seems fair. A $('i.fa') gives me 24 uses of icons, 20 of which are unique (out of the set of 519 that Font Awesome provides). Changing those into SVG and CSS files that contain only the icons we need is really easy, as SVG is a text format, and Font Awesome comes with a SVG version of the font. With a text editor, removing what isn’t needed enabled me to bring the CSS size to under 5kB, and the SVG to less than 12kB. Compressed, that’s less than 4.5kB combined.

That we’d get substantially smaller resources by dropping the icons we don’t need is not exactly surprising however, and there are tools out there that will let you build your own custom icon font with your own glyphs, and that only contain what you need. So what’s the problem then?

Well, let’s see…

  • Icon fonts are flat and  monochromatic. To build icons that have more than one color, you need to stack glyphs. SVG on the other hand gives total freedom in terms of color and gradients.
  • Icon font animations are limited to what CSS provides, whereas SVG can use not only CSS animations, but also SMIL elements.
  • The inner structure of glyphs in icon fonts is fixed. With SVG, the glyph has its own DOM, that can be addressed and modified using both CSS and script.
  • Icon font files are smaller (woff is about 30% smaller than compressed SVG from my unscientific experiments). That’s one point for icon fonts, if you take the time to remove the fat.
  • Both icon fonts and SVG allow for spriting (putting more than one icon in a single file).
  • All vector graphic design tools support SVG export. Making a font requires additional steps and tools. This being said, any spriting technique requires tooling. There’s tooling for SVG sprites too.

Icon fonts are not that bad: they did enable vector graphics, which are a great way to deal with retina displays, to become mainstream. Icon libraries such as Font Awesome are extremely useful as glyph libraries that have a well-designed and consistent look and feel. The technology is however suboptimal. What I’m advocating is not to get rid of icon fonts, but instead that they move their focus to outputting SVG sprites rather than fonts, and that they make it easier to pick and choose only the glyphs that you need. Taking build systems such as Grunt into account couldn’t hurt, either…

6 Comments

  • Agree with the pros and cons listed. One thing might perhaps be added: it's extremely easy to customize the color of font-based icons. Since they are monochromatic by definition (which is sometimes actually what you want) you don't have to know anything about their composition in terms of color - you can reliably change their color as if they are part of your text. In fact one might argue that this is their true proper use case - when they can be considered part of some piece of textual content.

  • Yes, I agree with your point about color. *But* you can actually define glyphs in SVG that will behave in exactly the same way.

    About semantics however I don't agree: the icons are always complementary to the text, enriching it, but not giving any new information. A simple way to see this is to wonder what happens to your icons under a screen reader: they just disappear with no ill-effect, because they were just illustrating the text, not adding any new information. So they are just images, and their alternate representation is the text next to which they stand.

  • SVG isn't supported by for example Internet Explorer 8 for Windows 7, which is still a supported OS/browser combination until January 2016 as far as I can see. http://support.microsoft.com/gp/Microsoft-Internet-Explorer

    But yeah, using the I tag is wrong and SVG is the better type (pun intended) in the long run.

  • @jocke: my point about XP was that there is no more recent version of IE that exists for it at all. On Windows 7, All version up to IE 11 are available, and will be provided by Windows Update so the wound is self-inflicted here: you really have to make a conscious effort to not upgrade from IE8 if you're running Windows 7. Windows XP, to this day, has a market share between 12% and 20%, and it's actually *growing*. This correlates with IE8's own market share, which is around 19%. So when we're talking about IE8, we're pretty much talking about Windows XP.

  • @bleroy: I think you misunderstood - who mentioned semantics? I didn't mean that font icons should be considered part of the text semantically! As you say, they are simply images illustrating the text. I simply meant that from a practical standpoint it makes most sense to use font icons in positions where you want to edit, manage and visually style them along with the text which they adorn (since they are in fact text, and you can style the text and the adorning font icon as one, on some ancestor element).

  • @Daniel: when you said "they can be considered part of some piece of textual content", that looked like a statement about semantics to me, apparently I misunderstood. It so happens that in those cases where you want to style the icon like the text, you can use SVG glyphs, that will behave the same way as glyphs from a font. You will however also get the other benefits from SVG.

Comments have been disabled for this content.