Once upon a time the web was a much simpler place, with a one size fits all policy. With the advent of tablets, retina displays, phones and various other devices however, that has all changed. Text scales well but we face a problem with images since they are often made in fixed widths. Icon fonts try to tackle this problem by converting images into text.

What is an Icon Font?

An icon font is simply a font where the characters are icons instead of letters. This provides you with the benefit of resizability, and they are pretty stylish too. Icon fonts have become pretty prevalent in usage amongst web designers because:

  1. They are user friendly: certain symbols and shapes can go a long way to showing a user how to use web pages.
  2. They are easy to use: once you include the appropriate files in your HTML icon fonts are really easy to use. Normally you have to upload various versions of icon images, but with icon fonts it’s just as easy as typing
  3. They are clean: you don’t need icon sets anymore, with CSS and an icon font you can accomplish almost anything!
  4. They are smaller: pages will load faster since you’ll be using less images, especially if your website needs to be compatible with a bunch of different devices.

For example, with a regular image icon you might have a little trouble getting it to look right in smaller or bigger sizes. Using icon fonts this problem completely disappears. Ever wish that your icons were a slightly different color? Just use the CSS color property to change the color of your icons. You can even add shadows or use any other text alterations that CSS provides.


Icon Fonts scale better than regular images

The Best Icon Fonts

There are a lot of icon font sets out there now, so below I have compiled some of the best. Some of them are free, others are not, but they are usually pretty cheap anyway.
fontelloFontello (Free)
fontelloSymbolset ($30)

font awesomeFont Awesome (Free)

modern pictogramsModern Pictograms (Free)

vector social iconsVector Social Icons (Free)

tipogramTipogram ($18)

icomoonIcomoon (Free or Purchased)

iconicIconic (Free)

foundation iconsFoundation Icons (Free)

entypoEntypo (Free)

marekventur iconsMarekventur (Free)

typiconsTypicons (Free)

iconsweets2Iconsweets 2 ($8)

gemiconsGeomicons ($16)

symboliconsSymbolicons ($40)

glyphiconsGlyphicons ($25)

heydonworks iconsHeydonworks Icons (Free)