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 iconmelon.com, svg Icons Lib for the Web.

iconmelon.com, 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.

Comments