A Free Icon Web Font

In a previous article, I addressed the many advantages of using a web font (in place of images) to render icons into your UI design. In the same article I mentioned a frustrating deficit of high quality, free icon web fonts available for embedding and conceded my own failure at building one with Fontstruct (less a font design tool than a mental health risk).

After continued experimentation, I found a satisfactory way to create a TTF and I'm now able to offer you Heydings Icons. It's a fairly modest collection of 50 57 60 glyphs specifically intended for the accessorization and classification of textual cues such as hyperlinks, navigation elements and buttons. You can, of course, use the set much more expressively as well. Also, there's no requirement to embed; you may just want to use it as a desktop/print font.

I've tried to map the characters to the glyphs alphabetically, although you'll notice some cheating going on. Below is a demonstration of the font embedded in a web page. I've wrapped each glyph in an abbr tag so that the corresponding title attributes can act as a key.

A a B b C c D d E e F f G g H h I i J K k L l M m N n O o P p Q q R r S s T t U u V v W w X Y y Z 1 ! 2 3 4 5 8 * - + @

The icon web font in action

As I said, the font is best used to enhance text-based content. Probably the best way of achieving this is via the :before and :after pseudo-classes, since this requires no changes to the markup. In the following example, I am using two icons to help classify a link that connects to an RSS resource served from an external location.

The code

a:before, a:after {
     font-family:'Heydings';
}

a[href*="rss"]:before {
     color:#c03f29;
     content:'R';
}

a[href*="rss"]:after {
     vertical-align:super;
     font-size:16px;
     content:'e';
}

To get the font, download the TTF using the button below. To prep the font for embedding, I recommend you use a service like Font Squirrel's @font-face generator. The current version is 1.2. Added in this version are glyphs for strike (lightning), archive and jotter (note pad).

The font is licensed under the SIL Open Font License, Version 1.1. This license is available with a FAQ at: http://scripts.sil.org/OFL.

Heydings IconsDOWNLOAD