Icons as fonts

From: Boagworld

Two of the biggest changes on the web recently are custom fonts (thanks to font-face) and responsive design.

One of the problems with responsive design are resizable images and by extension icons. When the interface adapts and changes size this can make displaying crisply rendered icons difficult.

Fortunately a few smart people have turned to font-face for the answer. By turning icons into fonts they become styleable with CSS, are infinitely scalable and are a smaller file size than imagery.

If you are interested in adopting this technique there are two options available to you.

You can download and use one of the royalty free font sets out there such as Modern Pictogram or IcoMoon.

pictos icon hosting

Alternatively you can use a hosted service like Pictos. This is similar to Fontdeck and so has an annual fee associated with it.

My preference is to use a royalty free icon set that I can host myself. This will perform better than relying on a third party service.

Either way, I suspect font-face is the future of icons.

Update: As @wez have pointed out on Twitter, this approach is not currently without its problems. In particular the current use of fonts for icons is not accessible. This is a fair comment although not insurmountable. I am sure this will improve over time and as I conclude “I suspect font-face is the future of icons.

Thanks for subscribing to Boagworld; a web design blog, forum and podcast run by Paul Boag and friends.

If you are new to my feed may I recommend also:

  • Following me on Twitter
  • Checking out my get started guide
  • Having a look through the archive of posts
  • Subscribing to the podcast
  • Visiting the forum
  • Maybe even hiring me!