Reference guide · images · Published 2026-08-15 · 3 min read
Image sprite versus icon font
Compare CSS image sprites, SVG sprites, and icon fonts by load weight, accessibility, and sharpness, and pick the right icon strategy.
- ·The options
- ·Load and sharpness
- ·Making the choice
The options
Web UI icons can be delivered four ways, and each trades a different set of costs:
| Approach | Load pattern | Sharpness | Accessibility |
|---|---|---|---|
| CSS image sprite | One image, sliced by offset | Fixed resolution, blurs on zoom | Good, icon is an image |
| Inline SVG sprite | One <symbol> bundle | Resolution independent | Excellent via accessible labels |
| Icon font | One font file, glyphs per code point | Variable, glyph alignment quirks | WYSIWYG: font glyphs are text, screen-reader output needs care |
| Individual images | Several small files | Fixed resolution | Good |
Most modern guidance favours SVG sprites or individual inline SVGs over icon fonts and raster sprites because they are resolution independent, lighter than a full icon font, and keep crisp edges at any display size.
Load and sharpness
A CSS image sprite bundles many icons into one request, which saves round trips, but every icon inherits the sprite's fixed pixel resolution. At a large display or on a retina screen the sprite must be provided at 2x or downscaled, adding bytes and management. An icon font sends one font file and renders glyphs as text, which is one lightweight request, but the glyphs are subject to font-loading, spacing, and baseline quirks, and anti-aliasing can make thin strokes render unevenly.
An inline SVG sprite avoids both downsides: the <symbol> definitions come down once with the document (or an external sprite file), each <use> lands exactly at its target size, and strokes stay crisp at 2x. The cost is that inline SVG adds markup to the HTML, which is why a single shared sprite is preferable to repeating every icon.
Accessibility
Semantics decide which approach is truly accessible:
- An image icon (raster sprite or individual image) needs an
altor an emptyaltplusrole="img"when the icon conveys meaning. - An inline SVG icon can carry an
<title>androle="img"oraria-hiddenfor decorative ones. - An icon font renders decorative glyphs as text, so the character can be read aloud or announced unless it is assigned to an element with an appropriate
aria-hidden. This is the classic trap: font glyphs are text to assistive technology whether you want them to be or not.
Decorate non-informative icons with aria-hidden and give informative ones a text label, whichever technique you choose.
Making the choice
- Choose inline SVG icons when icons need crisp multi-size rendering, zoom, or animation, which is most interactive UI today.
- Use a CSS image sprite only for a fixed, small set of raster assets at known display sizes, and supply a 2x variant.
- Reserve an icon font for a legacy system, a large mature icon library, or a case where the glyph-as-text behaviour is genuinely wanted (rare).
Prefer one strategy site-wide to keep maintenance and cache behaviour predictable. See SVG versus PNG for when to pick a single file over the other, SVG optimisation to keep the sprite lean, and font loading for the trade-offs of web fonts used as icons.