I clearly remember the first time I worked with an icon font. It was Font Awesome and was a great workflow improvement, saving a lot of http requests on some cases and eliminating the need of maintaining large .png icon sprite sheets in others. However Icon Fonts are not my first option any more.

They have been replaced by inline SVG icons as the usual choice for large applications and high traffic sites (unless the requirements include IE7/8 support). Some analysis can be read on CSS-Tricks comparison between both options. Here is another nice post by the Lonely Planet team about why they switched from an icon font to SVG.

The Use Case

As I mentioned in the last post, I spent some time lately building the MVP of Seed.io. I helped create the UI, but as there were no approved design, I needed to collect some feedback in the process. Building the new version of Sparked site also needed some back and forth with designer and product owner, and I can say that this happened in almost all responsive web projects I have been involved so far.

With this in mind, and given the context of a start-up environment - unstable requirements, a necessity of quick development and data based decision-making - I think icon fonts can be of great use. They allow you to achieve a nice UI look and feel with just the usual performance penalty of a small icon font download.

The Good Parts

I suggest using a custom icon font builder like Fontello or the one I will talk about, IcoMoon. I worked with Fontello in the past, and it gives you access to almost the same set of icons and features, but IcoMoon improves on Fontello with one key feature, so I will only tackle here IcoMoon (but again, Fontello is cool too).

My favorite feature is that IcoMoon provides a temporal link to a stylesheet with the current state of your "icon set". This is great to avoid downloading the font evey time the collection changes. You don't even need to change the link until it expires (but please remember not to use this link on production!).

They add a handy Codepen example, and you can see a similar example if you download the bundle and check the demo html file. IcoMoon also gives you the possibility of uploading a custom .svg file and adding it to your icon set in a really easy way. Finally, adding new icons or removing the ones that you aren't using is a trivial task.

Wrapping Up

I think IcoMoon is a great solution for unstable and fast paced developments like MVPs, proof of concepts or any toy project. Once you get to a more stable version, you would like to move them to SVG, or at least take into account some of the advice given by Filament Group about accessibility considerations when using icon fonts.

About inline SVGs

If you want to know more about inline SVGs you can check out some of these projects and articles:

• Filament's Group Grunticon
• IconMelon
• Iconic (paid)
• Image sprites or data URIs? Icon fonts or SVGs? A Grunt workflow for the ‘gold’ standard

How about you? What's your preferred way of dealing with icons? PNG sprites, png images, inline SVGs, SVG sprites, font icons?