12 Useful Icon Webfonts For UI Design

The increasing popularity of CSS @font-face embedding for custom fonts on websites opens up tons of possibilities for more creative typographic design on the web, however another slightly less explored @font-face technique at the moment is scalable vector icons (or dingbats) on the web, other than the possible accessibility issues, the advantages of replacing icon images with icon fonts are impressive, most notably the ability to style icons dynamically with CSS and their infinite scalability.

We have compiled a list of the 12 best free and premium icon webfonts.

Free Options

Notice by otlab.ru

Ikoo by Dasmuse

Symbol Signs by Sander Baumann

Guifx v2 Transports by Guifx

Glyphx by Nick’s Fonts

Dot Com by Kreative Korporation

Premium Options

The next 6 fonts do have a price on them but, in terms of the quality and practicality of these icons though, it should be a relatively small cost. Some premium options even include with the CSS @font-face stuff already set up for you to use, so you’re ready to go straight away.

Pictos by Drew Wilson

ClickBits by Fonthead Design Inc.

InfoBits by Fonthead Design Inc.

Writesocial by kndmedia

Wingdings2 by Microsoft

Wingdings3 by Microsoft

Summary

These are a collection of what we think are the 12 most practical icon fonts for user interface and web design, there are considerations to take into mind when using font replacement techniques in designs though, for example some more detailed icons are still most suited to bitmap images, icon fonts are really only for simple vector shapes at the moment and probably will be this way for quite a while.

Do you know any of any free or premium hidden gems we’ve missed?