From Icon Fonts to SVG Sprites

I have been a big fan of icon fonts for a while. I even participated at the creation of an open source project “MFG Labs icons”. This solution was the best so far, but now I move to SVG Sprites.

This technology is compatible with most of the browsers and if you really need to have it on Internet Explorer there is a polyfill for that.

SVG Sprites are easier to use than fonts because they are working like an image tag and using the same CSS rules. Icon fonts are more a kind of hack using text.

You can manipulate your SVG icons with classic properties like height, width, margin etc.. But for icon fonts, it is a bit tricky, you need to play with font-size and line-height.

The biggest problem for me with icon fonts is maintainability. If you want to add or update an icon, you can mess up your font with wrong unicodes, you need to have specific tools. This is not easy to implement in your workflow.

SVG sprites are pieces of cake, you just drop your icon in a folder and generate a sprite with your favourite task runner like Gulp.

I have created a project on Github (SVG Sprites generator) with Gulp and the “MFG Lab icons” that you can use to generate your sprites.