I’m a huge fan of using iconography in web and mobile apps, but they are sometimes a pain. Consider the complexity. We have to account for multiple icon sizes for various screen sizes, different sizes for retina displays, and perhaps even different colors for all those sizes for hover states. As you can imagine, our master sprite image can get unwieldy pretty quick!
That’s what makes icon fonts so useful in the visual designer’s toolbox. Like any font, icons that are built as fonts can change the size, color, opacity, etc. just using simple CSS…smart right?! I first heard of using icon fonts this way from a front-end developer for YouTube as he was describing their implementation of their play button.
But, how do you find a font that has all the perfect icons you need in your app?
Enter, IcoMoon. I can’t believe this app is free. In a nutshell, this web app gives you the ability to browse over 3800 icons, choose the ones you need for your app, and custom-build your own personalized font file with your custom icon set! This means you won’t have a bloated font file with a bunch of icons your app will never use. When you eventually download your font file from IcoMoon, it gives you all the font formats (TTF, SVG, EOT, WOFF), a handy guide of the actual icons in your custom font set, and the CSS/JS needed to use your fonts…very impressive! On top of all this goodness, the app also lets you import your own icon designs, and even customize them using their interface.
If your front-end devs have already started using icon fonts…I really recommend they give this app a spin. Finally…I think it’s time to say farewell to much-hated sprites!