Create an icon font from an image
An icon font is a font whose glyphs happen to be symbols rather than letters. That is the whole trick — once your mark is a glyph, everything that works on text works on it: size, colour, alignment, and a single file that installs anywhere a font installs.
How artwork becomes a glyph
A picture containing a single piece of artwork is treated as one glyph rather than as a sheet of letters. That glyph is mapped to U+E001, in the Unicode Private Use Area.
The Private Use Area exists precisely for this. Unicode permanently leaves those code points undefined so that private symbols can live there without ever colliding with a real character. Mapping an icon to a letter would be worse in a way that is easy to miss: your icon would replace that letter everywhere the font is applied, and anyone reading the text would see a symbol where a letter should be.
Preparing artwork that traces cleanly
Icons are usually harder to trace than handwriting, because they are often designed with effects that a threshold has no way to interpret.
- Flatten to solid black on solid white before you convert. Gradients become a hard edge somewhere in the middle, and where that edge falls is not something you chose.
- Remove drop shadows, outer glows and soft edges. They are all ink to a threshold.
- Fill any shape you want solid. An outline drawing traces as an outline — you get the ring, not the disc.
- Give the mark a margin of clear space so nothing is clipped at the edge.
- Simplify fine detail that will be invisible at text size. An icon set at 16 pixels cannot show a one-pixel line.
Colour, and why the font is one colour
An OpenType font of this kind stores outlines, not colours. Wherever you use the font, the glyph takes the current text colour, exactly like a letter does. That is a feature — one icon works on any background — but it means a multi-coloured logo has to be reduced to a single silhouette.
If you need the colour version too, the export includes a full-colour SVG of the traced artwork alongside the font, so you have both.
Building a set
Convert each symbol and assign it a code point. Working upward from U+E001 keeps a set tidy and predictable. The exported mapping.json records exactly which shape went to which code point, which is what you will want when you come to use the set in a stylesheet six months later.
Using the icon font
In a document, install the OTF and type or paste the code point. On the web, the export's font.css already contains the @font-face rule; apply the family to an element and insert the character, or set it through a CSS content property on a pseudo-element.
One accessibility note worth taking seriously: a Private Use Area character has no meaning to a screen reader, which will announce nothing useful. Always pair a decorative icon with real text, or give it an accessible label.
Questions
- Why is my icon mapped to U+E001 instead of a letter?
- The Private Use Area is reserved for exactly this. Mapping an icon onto a letter would make that letter render as your symbol everywhere the font is used.
- Can I keep the colours of my logo?
- Not in the font itself — outline fonts take the surrounding text colour. The export also includes a full-colour SVG of the artwork, which keeps the colours.
- Can I put several icons into one font?
- Yes. Convert each piece of artwork and give each one its own code point, working up from U+E001.
