Icon font

An icon font is a web font whose glyphs are pictures. You put a character in the markup and the font draws a house, a trash can, a star. There are two ways to address one. The old way is a code point in the Unicode private use area, a region reserved for exactly this kind of private agreement between a file and a font, so the markup contains a character that means nothing to anyone else. The newer way is a ligature: the font maps the letter sequence home to a single drawing, so the markup contains the readable word and the font substitutes the icon.

The appeal was real. One request delivered a whole set, the icons scaled like type because they were type, color and font-size styled them without touching a fill attribute, and they lined up on the baseline beside a label for free. Font Awesome built an era on that, and Material Symbols still ships as a variable icon font with the ligature naming and axes for weight, fill and optical size.

The failures are also real, and they are all failures of a picture pretending to be text. If the font does not arrive, a private-use code point renders as tofu and a ligature renders as the raw word, so the toolbar reads home star trash until the file loads (or forever, on a network that ate it). A screen reader meets whatever is in the text node: a meaningless private-use character, or the word home announced in the middle of a sentence it does not belong to. A reader who overrides page fonts, which is a real accessibility setting and not an edge case, loses every icon at once. Translation tools and copy and paste both take the text and leave the picture behind. And one font file is one colour.

SVG icons won because they answer all of that: per-icon delivery, multiple colours, aria-hidden on the drawing with a real accessible name on the control around it (see icon button), and no reliance on a font arriving at all. Icon fonts persist where the ecosystem is older than that argument, in long-lived design systems, in terminal setups, in codebases where the swap is not worth the churn. If you ship one, hide the glyph from assistive technology, name the control properly, and make sure the thing a reader sees while the font is in flight is not a word you did not mean to publish.