iconography-and-imagery
Iconography & Imagery
Icons and images carry most of a UI's pixels and most of its weight. Get the grid, the optics, and the delivery format right and everything reads sharper and loads faster. This is the working reference: build the icon set on a disciplined grid, ship it as inline SVG or a sprite, and serve images as AVIF/WebP with a reserved aspect-ratio box.
1. Icon grid & construction
Every icon lives on a square pixel grid. Standardize one base, scale by clean multiples.
| Base grid | Used by | Live area (padding) | Stroke | Corner radius |
|---|---|---|---|---|
| 16px | dense toolbars, inline text icons | 14px (1px) | 1.5px | 1px |
| 20px | compact UI (tables, menus) | 18px (1px) | 1.5px | 1.5px |
| 24px | default UI standard (Material) | 20px (2px) | 2px | 2px |
| 40px | large touch targets, feature tiles | 34px (3px) | 2.5px | 3px |
| 48px | hero / marketing | 40px (4px) | 3px | 4px |
Keyline shapes anchor optical consistency. In a 24px box the canonical keylines are: square 18×18, circle ⌀20, vertical rectangle 16×20, horizontal rectangle 20×16. Snap each glyph to the keyline that matches its dominant shape so a circle (◎) and a square (▣) feel the same visual weight even though their bounding boxes differ.