Web Font Subsetting and Image-Free Icon Systems
Using Unicode Private Use Area glyphs and font subsetting to eliminate icon image requests.
ER
Elena Rostova
Contributing Author · Squoosh Next BlogIcon fonts encode vector icon shapes as glyphs mapped to Unicode Private Use Area codepoints (U+E000 to U+F8FF), rendering them with CSS font-family and Unicode character entities. The advantage is infinite scalability, single-color CSS colorability, and zero image requests. The disadvantage is accessibility: icon font characters are read by screen readers as empty or with incorrect Unicode descriptions unless explicitly hidden with aria-hidden.
Font subsetting reduces the font file size by removing unused glyphs — a full Material Icons font is 1.2MB while a subset containing only the 20 icons used on a page may be under 5KB. The pyftsubset utility and the font-spider npm package both automate subsetting. For new projects, inline SVG icons are preferred over icon fonts because they support multi-color fills, ARIA labels, and are not affected by user font size preferences or system font overrides.
Key Takeaways
Icon fonts encode vector icon shapes as glyphs mapped to Unicode Private Use Area codepoints (U+E000 to U+F8FF), rendering them with CSS font-family and Unicode character entities.
The advantage is infinite scalability, single-color CSS colorability, and zero image requests.
The disadvantage is accessibility: icon font characters are read by screen readers as empty or with incorrect Unicode descriptions unless explicitly hidden with aria-hidden.
Font subsetting reduces the font file size by removing unused glyphs — a full Material Icons font is 1.
Try It in the Workspace
Everything discussed in this article can be tested directly in Squoosh Next — no sign-up, no upload, 100% client-side.