Iconography & 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.

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.

24px box, 2px padding → 20px live area
┌────────────────────────┐  ← 24px artboard
│  ┌──────────────────┐  │
│  │   keyline 20×20  │  │  ← optical balance happens HERE
│  │   ┌──────────┐   │  │
│  │   │ glyph    │   │  │
│  │   └──────────┘   │  │
│  └──────────────────┘  │
└────────────────────────┘

Rules

• Pixel-snap all anchors to whole or half pixels at the base size. A 2px stroke centered on a whole-pixel coordinate renders crisp; a stroke on x=12.37 renders blurry. For odd stroke widths (1px) center on the half-pixel (x=12.5) so the stroke lands inside one pixel column; for even widths (2px) center on the whole pixel.
• Optical alignment over mathematical centering. A triangle (play ▶) centered by its bounding box looks left-heavy — nudge it ~1px right toward its visual centroid. Asymmetric glyphs almost always need a manual optical nudge.
• Consistent corner radius across the whole set. Don't mix 1px and 4px corners; pick one radius scaled per base size.
• Terminal & joint consistency: choose round vs. butt line caps and round vs. miter joins once (stroke-linecap, stroke-linejoin) and apply set-wide. Mismatched caps read as two different designers.
• Optical sizing: a stroke that reads as 2px at 24px becomes hairline at 16px and chunky at 48px. Maintain apparent weight by increasing relative stroke at small sizes and drawing dedicated small variants (don't just transform: scale() a 24px icon down to 16px — it goes muddy). Material ships 20/24/40/48 masters for exactly this reason.

2. Icon style systems

| Style | When | Notes |