What are icon fonts?

An icon font is a regular font file where each “letter” is an icon. You size and colour it like text. Clever — but the approach has real downsides that pushed the web toward SVG.

How they work

Icons are drawn as glyphs and mapped to code points — often in Unicode's Private Use Area so they don't collide with real characters. A CSS class sets the font and inserts the glyph via content. The browser renders it exactly like text, inheriting color and font-size.

The trade-offs

• Single colour only.
• Can render blurry because font hinting targets text, not icons.
• Accessibility issues — glyphs may be announced as odd characters.
• A failed font load shows empty boxes where icons should be.

Why SVG took over

SVG icons are crisp, can be multicolour, are individually loadable, and are properly accessible. Most former icon-font libraries (including Font Awesome) now recommend their SVG versions.

Frequently asked questions