Icon Rendering — Part 1
Approaches to shipping icons: the design space and the constraints.
Icons look trivial — “just put a little picture there.” But how you render them quietly shapes performance, consistency, and the whole feel of an app. Before comparing techniques, this lesson builds the foundation: how images actually work, and what makes SVG special.
Why icons matter
Open any app and you'll count dozens of icons — in the nav, the sidebar, next to avatars, inside every button. Designers reach for them because they do two things text can't: convey meaning instantly and compactly (a 🔍 says “search” with no words), and invite action (a little trash can begs to be clicked). That ubiquity makes icon rendering a real system-design topic — especially in interviews, where high-level design questions almost always feature icon-heavy UIs.
Four goals to optimize for
Every rendering technique we'll compare is judged against the same four goals. Keep them in mind — tap to expand:
Raster vs. vector
Every technique builds on one of two image families. Raster images (PNG, JPG, WebP) are a fixed grid of pixels — blow them up and the squares show. Vector images (SVG) store the math — points, lines, and curves — so the browser can redraw them crisp at any size. Drag the zoom and watch the difference:
Anatomy of an SVG path
That “math” is mostly the <path> element. Its d attribute is a list of pen instructions: Move (pen up), Line, Horizontal, Vertical, and Z to close. Step through them and watch the pen draw — the path is just these commands replayed:
Real icons combine many such paths (plus <circle>, <rect>, gradients), all wrapped in an <svg> container with a viewBox that defines its coordinate system. A <symbol> lets you define an icon once and reuse it by id with <use> — the key to SVG sprites we'll meet later.
The font-loading flashes
One technique renders icons as font glyphs — which inherits a classic web-font problem. While a custom font downloads, the browser either hides the text (FOIT) or shows a fallback then swaps (FOUT). Either way the user sees a flash:
Check your understanding
Explore
Open your browser dev-tools on any site you like and:
- Inspect an icon — is it an
<img>, an<svg>, or a font glyph? - Zoom the page to 400% — which icons stay crisp and which blur?
- Find one
<path d="…">and spot the M / L / Z commands.
- →Icons are everywhere, so their rendering affects performance, consistency, and flexibility — a real design topic.
- →Judge every technique on four goals: consistency, performance, maintainability, flexibility.
- →Raster = fixed pixels (blurs when scaled); vector/SVG = math (sharp at any size from one small file).
- →An SVG path is pen commands —
M L H V Z— inside an<svg>with aviewBox;symbol+useenable reuse. - →Icon fonts inherit web-font FOIT/FOUT flashes during loading.