States
Section titled “States”Icon is not interactive; mouse, keyboard or touch do not change its look.
| State | Supported | Visual change | Tokens |
|---|---|---|---|
| Default | Yes | The chosen size and tone | icon-size-*, color-icon-* |
| Hover | No | None | - |
| Pressed | No | None | - |
| Focus | No | None; it takes no focus | - |
| Disabled | Partly | tone="disabled" gives a faded colour; the icon has no disabled state of its own |
color-icon-disabled |
| Right to left | Yes | Icons that follow the reading direction flip horizontally | - |
Measurements
Section titled “Measurements”| Property | Value | Token |
|---|---|---|
Size, xs |
12 px | icon-size-xs |
Size, sm |
16 px | icon-size-sm |
Size, md (default) |
20 px | icon-size-md |
Size, lg |
24 px | icon-size-lg |
Size, xl |
32 px | icon-size-xl |
Size, inherit |
The box of the parent component (size-full) |
- |
| Stroke width | 2 | - |
Tokens
Section titled “Tokens”Values are shown for the selected brand; change the brand in the top bar.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-icon-default | #262626#262626#262626 | #f5f5f5#f5f5f5#f5f5f5 | |
--bigbang-color-icon-subtle | #737373#737373#737373 | #a1a1a1#a1a1a1#a1a1a1 | |
--bigbang-color-icon-disabled | #a1a1a1#a1a1a1#a1a1a1 | #525252#525252#525252 | |
--bigbang-color-icon-inverse | #ffffff#ffffff#ffffff | #171717#171717#171717 | |
--bigbang-color-icon-brand | #146d83#9a451c#4f55b4 | #77bacf#ea9774#9aa6ff | |
--bigbang-color-icon-danger | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-icon-success | #138a50#138a50#138a50 | #7dd09b#7dd09b#7dd09b | |
--bigbang-color-icon-warning | #a16600#a16600#a16600 | #ecac5f#ecac5f#ecac5f | |
--bigbang-color-icon-info | #007ac1#007ac1#007ac1 | #79c2ff#79c2ff#79c2ff | |
--bigbang-icon-size-xs | 12px12px12px | 12px12px12px | |
--bigbang-icon-size-sm | 16px16px16px | 16px16px16px | |
--bigbang-icon-size-md | 20px20px20px | 20px20px20px | |
--bigbang-icon-size-lg | 24px24px24px | 24px24px24px | |
--bigbang-icon-size-xl | 32px32px32px | 32px32px32px |
tone="current" uses no token; it takes the colour of the surrounding text with text-current.
Motion and interaction
Section titled “Motion and interaction”| Interaction | Motion | Reduced motion |
|---|---|---|
| Hover, press, focus | None: Icon is not interactive | Nothing to reduce |
| Enter and exit | None: Icon appears and disappears at once | Nothing to reduce |
| Rotation or animation | None: Icon contains no animation of its own | Nothing to reduce |
Icon uses no motion preset; the motion of the component it sits in (such as the press scale of Button) is on that component’s page. For motion values, see the Motion page.