Lesson 13 of 17 · Episode 13

Icon Rendering — Part 2

SVG sprites, icon fonts, and inline SVG compared in depth.

SpritesIcon fontsInline SVG

With the fundamentals down, let's walk the techniques in the order they evolved. The first three are raster-based — each one fixing a pain point of the one before it: separate images → sprites → fonts.

Technique 1

Separate images

The baseline isn't really a “technique” — it's just treating each icon as an ordinary image: one <img> (or background) per icon, each its own file and its own request. It's dead simple and works in every environment, and because each file is cached independently, changing one icon never invalidates the others.

The catch

It's raster, so it doesn't scale (you need a file per size) and you can't recolor it on the client (a file per color/theme). And every icon is its own network request.

The cost

Why many requests hurt

A page with 200 icons fires 200 requests — each with its own handshake and round-trip. That's the wall the next technique tears down:

Separate images · 8 requests

icon1

icon2

icon3

icon4

icon5

icon6

icon7

icon8

Sprite · 1 request

sprite

One round-trip pays for every icon — fewer handshakes, faster paint.

Technique 2

Image sprite

The image sprite solves the request problem: pack every icon into one big image, download it once, then show just the slice you need by shifting background-position like a window over the sheet. Pick an icon and watch the crop slide:

One sprite · 6 icons · 1 request

The sprite sheet (loaded once)

Cropped result

.icon-home {
  background: url(sprite.png);
  background-position: -0px 0;
}

Mature tooling generates the sheet and the per-icon CSS classes for you, so you never compute offsets by hand. The trade: it's still raster (no scaling, no recolor), and changing one icon regenerates the whole sheet — invalidating its cache for everyone.

Technique 3

Icon fonts

Icon fonts make a leap: stop thinking of icons as images and treat them as text. Each icon is a glyph mapped to a code point; you render it with a class and the browser draws it like a character. Suddenly all the text superpowers apply:

Note

Libraries like Font Awesome and Material Icons are icon fonts. You can also generate a custom one (e.g. with IcoMoon) from your own SVGs — at the cost of regenerating the font file whenever the set changes.

Try it

Pick the technique

Match each situation to the raster technique that fits best:

0/5 sorted

A landing page with just 3–4 icons

A dashboard with 150 raster icons, rarely changed

Icons that must be resized and recolored from one set

A photorealistic, multi-color badge

A legacy email/browser that can't do SVG

Practice

Check your understanding

Q1Multiple choice

How does an image sprite show a single icon from the combined sheet?

Q2Multiple choice

What's the main visual limitation of icon fonts?

Q3Sort each scenario

Independent per-icon cache, or one shared cache?

Separate images

Image sprite

Icon font

Explore

On a content-heavy site (a news site, a dashboard):

Open the Network tab and count image requests for icons.
Look for one large image that contains many icons — that's a sprite.
Find an element whose font-family is an icon font and read its glyph code point.

Key takeaways

→Separate images: simplest and independently cached, but one request per icon, raster-only, no recolor.
→Image sprite: one request for all via background-position cropping — still raster, and one change re-generates the sheet.
→Icon fonts: icons as text glyphs — scalable, recolorable, tiny — but single-color and prone to FOIT/FOUT.
→Each technique fixes a flaw of the previous one; the right pick depends on count, stability, and whether you need scaling/recolor.

← Previous

12. Icon Rendering — Part 1

14. Icon Rendering — Part 3