Icons
Icons support recognition and comprehension. They are used sparingly and never as the sole carrier of information.
Icon style
- Flat icons
- No shadows or decorative effects
- Clear, recognizable shapes
Sizes
| Context | Size |
|---|---|
| Payment method icon | 40px height |
| Inline / action icon | 24×24px |
Icons must not be arbitrarily scaled.
Color usage
Icons use functional color tokens:
- Default: text color
- Muted: muted text color
- Interactive: primary color
Icons must meet non-text contrast requirements (3:1).
Accessibility
Icons are designed to support comprehension and must not replace text.
- Interactive icons are operable using a keyboard.
- Interactive icons have visible focus indicators.
- Decorative icons are hidden from assistive technology.
For general accessibility requirements, see Accessibility