Icon tokens
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
16px |
16px icon box |
|
|
|
|
24px |
24px icon box |
|
|
|
|
32px |
32px icon box |
|
|
|
|
40px |
40px icon box |
|
|
|
|
48px |
48px icon box |
|
|
|
|
64px |
64px icon box |
|
|
|
|
80px |
80px icon box |
|
|
|
|
96px |
96px icon box |
|
|
|
|
128px |
128px icon box |
|
Color
Theme Tokens
Primary
Responsive icon-primary color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-icon-primary-on-light on a themable container with a light color palette and --rh-color-icon-primary-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#ee0000
|
|
||
|
|
#ee0000
|
|
Secondary
Responsive icon-secondary color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-icon-secondary-on-light on a themable container with a light color palette and --rh-color-icon-secondary-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#151515
|
|
||
|
|
#ffffff
|
|
Subtle
Subtle icons (like the close button in the dialog component) are used in both light and dark themes and also have interactive states.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#707070
|
|
||
|
|
#a3a3a3
|
|
Status
Danger
Responsive icon-status-danger color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-icon-status-danger-on-light on a themable container with a light color palette and --rh-color-icon-status-danger-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#b1380b
|
Danger status icon color (light theme) |
|
|
|
|
#f0561d
|
Danger status icon color (dark theme) |
|
Caution
Responsive icon-status-caution color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-icon-status-caution-on-light on a themable container with a light color palette and --rh-color-icon-status-caution-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#ca6c0f
|
Caution status icon color (light theme) |
|
|
|
|
#f5921b
|
Caution status icon color (dark theme) |
|
Warning
Responsive icon-status-warning color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-icon-status-warning-on-light on a themable container with a light color palette and --rh-color-icon-status-warning-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#dca614
|
Warning status icon color (light theme) |
|
|
|
|
#ffcc17
|
Warning status icon color (dark theme) |
|
Default
Responsive icon-status-default color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-icon-status-default-on-light on a themable container with a light color palette and --rh-color-icon-status-default-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#4d4d4d
|
Default status icon color (light theme) |
|
|
|
|
#4d4d4d
|
Default status icon color (dark theme) |
|
Neutral
Responsive icon-status-neutral color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-icon-status-neutral-on-light on a themable container with a light color palette and --rh-color-icon-status-neutral-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#4d4d4d
|
Neutral status icon color (light theme) |
|
|
|
|
#c7c7c7
|
Neutral status icon color (dark theme) |
|
Info
Responsive icon-status-info color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-icon-status-info-on-light on a themable container with a light color palette and --rh-color-icon-status-info-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#5e40be
|
Info status icon color (light theme) |
|
|
|
|
#b6a6e9
|
Info status icon color (dark theme) |
|
Success
Responsive icon-status-success color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-icon-status-success-on-light on a themable container with a light color palette and --rh-color-icon-status-success-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#3d7317
|
Success status icon color (light theme) |
|
|
|
|
#87bb62
|
Success status icon color (dark theme) |
|
Other libraries
To learn more about our other libraries, visit the getting started page.
