Outlined line icons sized to the text, with filled symbols reserved for a selected state.
Icons
- One family of outlined line icons with a consistent 2-point stroke.
- Size to the text beside them: 16 points in rows, 18 by default, 20 in toolbars. Don’t scale icons up to fill space.
- Outlined by default. A filled variant shows only a selected state (R7).
- Monochrome in toolbars and navigation, in the label colour (R3). Colour belongs to meaning.
- Name every icon-only control. It has an accessible label and a tooltip with the same words.
- Familiar metaphors. Use the symbol people already know for an action; don’t invent a new one for a common job.
Illustrations
Each area of a product can have a duotone illustration in its own system colour, used on hubs and dashboards. Keep an area’s colour the same everywhere it appears.
Images
- Product photos and logos sit in rounded frames with a hairline.
- Never put text over an image without a dimming layer.
- Give every meaningful image alternative text that says what it shows; mark decorative images as decorative.