There are many pros and cons to using icon fonts and SVGs for icons in your designs. I had been under the impression that icon fonts were the more effective of the two but have had some reservations. For one, what happens if you need a multi-color icon? Remember, they are simply fonts so they have to be a solid color. The only way around that is to get all hacky and build the various components using other elements. The sizing of things is also a little odd since they are fonts they have to be sized with font-size and line-height which doesn’t necessarily feel right. Using animations with them is also very limited when compared to SVG. And one last thing, they cant be set to scale at a percentage of their containing elements like SVGs can.

This is all coming from a guy who hasn’t actually ever even tried to use icon fonts but these are just potential issues that I see if I were to use them. SVGs on the other had, well if you’ve had a chance to read any of my other posts, you’d know I’m a fan. I have yet to try and work with SVG sprites however, but it looks like there are some nice techniques available to handle them in a performant way.

A new project has emerged utilizing these techniques to make it easier for us all to use them, svg Icons Lib for the Web., svg Icons Lib for the Web

Is a free repository of SVG icons and filters where you can also upload your own SVGs. It is essentially a starter kit and example of how they should be used. You can easily customize and download the icons that you want with the associated markup and css needed. Its a very handy tool and resource indeed, thanks Oleg Solomka!

Demo & Download

You can play around and download SVG icon sets here.