Icon Rendering — Part 3
Tying icon rendering back to performance and component APIs.
The last three techniques are vector-based, built on SVG. They recover everything raster lost — infinite sharpness, recoloring, animation — and the final one folds in the sprite idea too. Then we'll put all six side by side and see how real apps mix them.
SVG as an asset
The simplest jump from raster: keep using an <img> (or background) but point it at a .svg instead of a .png. You instantly gain scalability — one file, sharp at any size — and SVGs are usually smaller (compressible text). But because it's still loaded as an external image, you're back to one request per icon and you have no access to its internals — you can't recolor or animate the paths inside.
Inline SVG
Inline SVG drops the <svg> markup straight into the document (or bundles it as a component). Two big wins: it ships with your markup/JS bundle (no extra request), and the paths live in the DOM so you have full control — restyle any part, animate it, react to state. Try it:
In a component world you wrap it once (<HomeIcon />) with props for color and size, import SVGs as components via a build plugin (SVGR and friends), and even tree-shake the unused ones.
SVG sprite
The SVG sprite is the image-sprite idea reborn in vectors: one big SVG holds every icon as a <symbol> with an id, and you stamp one out with <use href="#home"/>. You keep full SVG control (recolor, animate) and collapse everything to one resource. It comes in two flavors:
All six, side by side
Here's the whole journey scored on five pillars. Flip to Autoplay to tour them and watch the trade-offs shift — notice how the vector techniques light up scaling and color control:
How real apps mix them
Production apps rarely pick just one — they mix techniques per need. Tap through three real examples:
Check your understanding
Design challenge
For an app you're building, plan its icon strategy:
- Roughly how many icons, and how often do they change?
- Do you need recoloring or animation (→ inline/sprite) or is one color fine (→ font)?
- Pick a primary technique and name one spot where you'd deviate — and why.
- →SVG as asset: scalable and small, but one request each and no internal control.
- →Inline SVG: bundled (no extra request), full recolor/animate control, tree-shakeable — at the cost of DOM bloat and bundle caching.
- →SVG sprite: one resource of
<symbol>s used via<use>; external references restore caching and trim the DOM. - →Across all six there's no single winner — real apps (Wondercraft, Luciq, Facebook) mix techniques per use case.