Icon tokens

Ex. Token name Value Use case
--rh-size-icon-01 16px

16px icon box

Full CSS Variable Permalink to this token
--rh-size-icon-02 24px

24px icon box

Full CSS Variable Permalink to this token
--rh-size-icon-03 32px

32px icon box

Full CSS Variable Permalink to this token
--rh-size-icon-04 40px

40px icon box

Full CSS Variable Permalink to this token
--rh-size-icon-05 48px

48px icon box

Full CSS Variable Permalink to this token
--rh-size-icon-06 64px

64px icon box

Full CSS Variable Permalink to this token
--rh-size-icon-07 80px

80px icon box

Full CSS Variable Permalink to this token
--rh-size-icon-08 96px

96px icon box

Full CSS Variable Permalink to this token
--rh-size-icon-09 128px

128px icon box

Full CSS Variable Permalink to this token

Color

Theme Tokens

--rh-color-icon-primary --rh-color-icon-secondary --rh-color-icon-status-danger --rh-color-icon-status-caution --rh-color-icon-status-warning --rh-color-icon-status-default --rh-color-icon-status-neutral --rh-color-icon-status-info --rh-color-icon-status-success

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
--rh-color-icon-primary-on-light #ee0000
Full CSS Variable Permalink to this token
--rh-color-icon-primary-on-dark #ee0000
Full CSS Variable Permalink to this token

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
--rh-color-icon-secondary-on-light #151515
Full CSS Variable Permalink to this token
--rh-color-icon-secondary-on-dark #ffffff
Full CSS Variable Permalink to this token

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
--rh-color-icon-subtle #707070
Full CSS Variable Permalink to this token
--rh-color-icon-subtle-hover #a3a3a3
Full CSS Variable Permalink to this token

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
--rh-color-icon-status-danger-on-light #b1380b

Danger status icon color (light theme)

Full CSS Variable Permalink to this token
--rh-color-icon-status-danger-on-dark #f0561d

Danger status icon color (dark theme)

Full CSS Variable Permalink to this token

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
--rh-color-icon-status-caution-on-light #ca6c0f

Caution status icon color (light theme)

Full CSS Variable Permalink to this token
--rh-color-icon-status-caution-on-dark #f5921b

Caution status icon color (dark theme)

Full CSS Variable Permalink to this token

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
--rh-color-icon-status-warning-on-light #dca614

Warning status icon color (light theme)

Full CSS Variable Permalink to this token
--rh-color-icon-status-warning-on-dark #ffcc17

Warning status icon color (dark theme)

Full CSS Variable Permalink to this token

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
--rh-color-icon-status-default-on-light #4d4d4d

Default status icon color (light theme)

Full CSS Variable Permalink to this token
--rh-color-icon-status-default-on-dark #4d4d4d

Default status icon color (dark theme)

Full CSS Variable Permalink to this token

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
--rh-color-icon-status-neutral-on-light #4d4d4d

Neutral status icon color (light theme)

Full CSS Variable Permalink to this token
--rh-color-icon-status-neutral-on-dark #c7c7c7

Neutral status icon color (dark theme)

Full CSS Variable Permalink to this token

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
--rh-color-icon-status-info-on-light #5e40be

Info status icon color (light theme)

Full CSS Variable Permalink to this token
--rh-color-icon-status-info-on-dark #b6a6e9

Info status icon color (dark theme)

Full CSS Variable Permalink to this token

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
--rh-color-icon-status-success-on-light #3d7317

Success status icon color (light theme)

Full CSS Variable Permalink to this token
--rh-color-icon-status-success-on-dark #87bb62

Success status icon color (dark theme)

Full CSS Variable Permalink to this token

Other libraries

To learn more about our other libraries, visit the getting started page.