Friday Linkage: Iconfonts, Grunticon and SVG tools

17 Jan 2014

I’ve now completed a few icon projects for clients where the deployment method has been a font. It’s a fairly painful process, but a great way of providing resolution independent graphics to all sorts of browsers, including as far back as IE4. The alternative has been SVG sprites, which work, and allow multiple colours, but to me have been even more of a pain to implement.

Something I hadn’t considered a problem until recently, was font-face support on mobile, which of course iconfonts rely on. Ian Feather (Front End Developer at Lonely Planet) wrote about this in Ten reasons we switched from an icon font to SVG.

The Filament Group have done a lot of work on this, and their research showed that the top 5 browsers without font-face support have a user base that can’t be ignored:

Opera Mini 261 million
Nokia XPress browser 70 million
Blackberry 4 & 5 – stock browser 20 million
Android 2.1 – stock browser 10 million
Windows Phone 7 – 7.8 10-15 million

These user numbers are estimates, but the total number of devices that don’t support font-face is around 370 million. This may or not affect your project – at least one of my clients uses the iconfont within an self-contained application, and it will never be viewed in any browser. Thankfully, the Filament Group also provide two solutions:

Bulletproof Icon Fonts – if you have to use icon fonts, here’s a way to implement them with fallbacks.

Grunticon – takes a folder of SVG/PNG files, and outputs them to CSS in 3 formats: svg data urls, png data urls, and a third fallback CSS file with references to regular png images, which are also automatically generated. So you can avoid the hassle of working out sprite positions and still get each icon setup with a class name, just as you would with an iconfont tool like IcoMoon. I haven’t had a play with this yet, but it looks very promising indeed!

Finally, a very useful tool if you’re exporting SVG from something like Illustrator, is svgo ui, an easy drag and drop front end to the svgo command tool for optimising file sizes. I find I save on average about 30% on my icon files!

Recent Posts

The Infinite Canvas

09 Feb 2018

Blade Runner 2049

14 Oct 2017

iPad Pro Pencil loop

11 Oct 2017

Troika #32: Tearjerker

04 Oct 2017

Troika #31: Dusk

06 Sep 2017

Icon Design Process talk at Reasons To 2017

06 Sep 2017

Instagram Hickstagram

  • 16 Mar 2018

    The Clientele with @corinpilling at the Scala last night were mesmerising! It also made me realise how great a guitarist Alasdair MacLean is!

  • 13 Mar 2018

    Hold me…

  • 13 Mar 2018

  • 11 Mar 2018

    Must. Push. Button.

  • 11 Mar 2018

    Dinner in the Oxford’s. Happy Mother’s Day @hicksleigh! (It was the best one of Dan - honest)

  • 11 Mar 2018

    She didn’t have a clue

  • 10 Mar 2018

    You paint a great mural, and some idiot adds their ugly tag to the little of space you left to balance the composition.

  • 09 Mar 2018

    Long stretch of Berlin Wall

  • 02 Mar 2018

    Evil snow face

  • 02 Mar 2018

    “The big squeeze” is the claim, but this bottle won’t squeeze any further. There’s a lot of marmite in there that’s only coming out with knife… #baddesignbulletin

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom