Icons identify an action, object, or status. A shared drawing language makes them recognizable at compact sizes without replacing the words people need.
Draw on a common grid
Use a 24-unit canvas, consistent stroke, rounded joins, and optical alignment. Measure the visible shape, not only its bounding box. Test at 16, 18, 20, and 24 pixels.
Give every action a name
Pair unfamiliar symbols with text. An icon-only button needs a useful accessible name; a decorative icon beside the same label is hidden from assistive technology.
Preserve meaning across states
Keep the same metaphor through hover and selection. Use a label or shape as well as color for status. Mirror directional navigation when appropriate; do not mirror logos or non-directional symbols.
Default decisions
Starting conventions for this system. Validate them in the context of your product.
- Canvas
- 24 × 24 units
- Interface glyph
- 18px default; 16–24px supported
- Stroke
- 1.75 units at the source size
- Action target
- At least 24 × 24px without relying on exceptions; prefer 44px for touch