Data display
Icon
A square viewport with optical centring for non-square glyphs.
Examples
Decorative glyphs, 24px
Size and stroke weight
12px · 0.7516px · 1.024px · 1.532px · 2.0
Informative vs decorative
Left: informative, has a name. Right: decorative, hidden from assistive tech.
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Viewport | Square, 12 / 16 / 24 / 32px | Required |
| 2 | Glyph | Optically centred | Required |
| 3 | Stroke | 0.75 / 1 / 1.5 / 2px | Required |
Specifications
| Sizes | 12 · 16 · 24 · 32px |
|---|---|
| Stroke weight | 0.75 · 1.0 · 1.5 · 2.0px |
| Colour | Inherited from the parent text state or brand colour |
Interaction
| Key | Result |
|---|---|
| None | Not focusable |
| Trigger | Response |
|---|---|
| None | Inherits colour from its parent |
Accessibility
role · image or presentation
1.1.1Non-text Content1.4.11Non-text Contrast
| Requirement | How Rig meets it |
|---|---|
| Decorative | aria-hidden="true" and focusable="false" when text or a name sits beside it |
| Informative | role="img" and aria-label |
| Colour | Uses currentColor so it follows the text state and forced-colours mode |
| Contrast | Meaningful icons 3:1 |
Usage
| Do | Don’t |
|---|---|
| Pair icons with text where meaning is not universal | Do not use an icon as the only cue for an error |