Using web fonts instead of images as icons

Using a web font for your icons could be a lot easier, but is it the right thing to do? There are some good sides on using a web font just like there are some bad sides.

So what are the benefits and drawbacks of using a web font for your icons compared to using several images or image sprites?

Using web fonts

The good:

  • They scale. No matter how big or small you want the icons a font will scale with your demands
  • Very little photoshop work. You won’t have to create and save images and later redo it as you might want the image a little bit larger or smaller
  • Not much CSS at all. No need to write all those CSS classes with background images and sprite positions

The bad:

  • Not very user friendly. Screen readers will have a hard time understanding that that lowercase “p” actually means “silhouette figure of a man”. However, if your don’t care about the people using screen readers this might not be a drawback for you.
  • SEO. A lowercase “p” to illustrate a silhouette figure of a man might have a negative impact on your SEO. Not a big impact though. But still.
  • Limitations. You are limited to the icons in the fonts you’re using. If you want your own custom made icons, or just more icons you’ll have a hard time googling new icon fonts or creating your very own font instead.

Using images

The good:

  • No limits. There are endless of resources of icons available. Especially those now annoying social icons. They are everywhere!
  • User friendly. If you do your HTML and CSS correctly screen readers will have no problem sorting out what’s what.

The bad:

  • Creating all those images. If you don’t use sprites you have to keep all those images updated, and even if you use sprites you still need to keep the sprite image file updated.
  • They don’t scale. If you have a sprite with 50 icons and want them all 25% larger you’ll have a hassle remaking the whole sprite file from start. I’ve done that. Not funny.

Conclusions

There are many pros and cons with either method. However the most correct and accepted method of solving the issue of icons is still images or image sprites. I’ve myself wrestled with the idea of using a web font for icons in some cases, but I’ve always gone back to sprites since I always wanted something that wasn’t in a font.

Resources

  • Font Awesome – The iconic font designed for use with Twitter Bootstrap
  • Socialico – A package of 74 social media icons, combined within a single weight font
  • Entypo – A set of 100+ carefully crafted pictograms available as an OpenType font, vector EPS and web font
  • CSS Sprite Generator – A web tool that helps you create a sprite and CSS from all your images

Thoughts and comments

  1. Hi, I was thinking along the same lines as you were. I am leaning strongly towards font icons.
    Here is great read on icon fonts and accessibility: http://pictos.cc/articles/using-icon-fonts/
    This should remove your concerns about SEO and user friendliness.
    One great feature of icon fonts is the ability to change color and size. This really makes them great and flexible design elements.
    Cheers, andrej

  2. I really prefer using font icons than images, as for font icons it’s easier to change colors and resize them, but for sprite images if in-case you don’t have Photoshop on your machine you will be slightly going to struggle.

Share your thoughts on this

Your email address will not be published.