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 this page.
Feedback
To give feedback about anything on this page, contact us.
Other libraries
To learn more about our other libraries, visit the getting started page.