Skip to main content

Intro to icon fonts

Apr 29 '16

Intro to icon fonts


What are icon fonts?

Icon fonts are a collection of SVG icons that you use to create a font you can employ later in your markup. The great things about icon fonts are their broad support, ease of use, and quick setup.

What's wrong with sprite sheets?

With the explosion of responsive and mobile-first design, sprite sheets quickly become tedious. You have to create 2x, 3x, 4x, and more versions. As you add more people to the project or hand it off, it becomes difficult to maintain and manage. This is why SVGs and icon fonts are so great: you just need 1 asset and you're set.

Why do I need them and what are the benefits?

Icon fonts' alternatives are sprite sheets and SVG sprites. Unlike plain old sprite sheets, you don't need to update and maintain 1x, 2x, 3x, 4x versions for different screens. SVG sprites are great and have their own benefits, but icon fonts are the best if you want broader support (including older versions of IE).

There are great resources out there to help you get started using icon fonts. There are ready-made fonts like Font Awesome, which was the original Twitter Bootstrap icon font.

Take control and make your own. Get the performance benefits of just serving the icons you use. Your users will thank you for it. There are easy-to-use drag and drop services you can use to create an icon font. They'll generate all the necessary files you need.


Unlike SVGs and raster images, to get multi-color icons you need to use CSS to stack one icon over another. If you find yourself needing many multi-color icons or icons with complex gradients, SVGs might be your best bet.

How do I get started?

Getting started is easy. You can pick and choose the ready-made fonts on or Those sites even allow you to make a custom font from your own SVGs. Just make sure all borders are expanded and shapes are compounded.

If you don't want to constantly be updating and downloading files, you can set up Gulp and Grunt tasks. This would allow you to just pop in SVGs to a font-only directory you set up and it'll automatically compile whenever you add a new SVG. There are also fallbacks in place so you can generate a sprite sheet to cover *every* single point of failure.

I've had a lot of success with grunt-webfont and gulp-iconfont.

Read more about: