Icon tokens

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

16px icon box
--rh-size-icon-02 24px

24px icon box
--rh-size-icon-03 32px

32px icon box
--rh-size-icon-04 40px

40px icon box
--rh-size-icon-05 48px

48px icon box
--rh-size-icon-06 64px

64px icon box
--rh-size-icon-07 80px

80px icon box
--rh-size-icon-08 96px

96px icon box
--rh-size-icon-09 128px

128px icon box

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

Ex. Token name Value Use case
--rh-color-icon-primary-on-light #ee0000
--rh-color-icon-primary-on-dark #ee0000

Secondary

Ex. Token name Value Use case
--rh-color-icon-secondary-on-light #151515
--rh-color-icon-secondary-on-dark #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
--rh-color-icon-subtle #707070
--rh-color-icon-subtle-hover #a3a3a3

Status

Danger

Ex. Token name Value Use case
--rh-color-icon-status-danger-on-light #b1380b

Danger status icon color (light theme)
--rh-color-icon-status-danger-on-dark #f0561d

Danger status icon color (dark theme)

Caution

Ex. Token name Value Use case
--rh-color-icon-status-caution-on-light #ca6c0f

Caution status icon color (light theme)
--rh-color-icon-status-caution-on-dark #f5921b

Caution status icon color (dark theme)

Warning

Ex. Token name Value Use case
--rh-color-icon-status-warning-on-light #dca614

Warning status icon color (light theme)
--rh-color-icon-status-warning-on-dark #ffcc17

Warning status icon color (dark theme)

Default

Ex. Token name Value Use case
--rh-color-icon-status-default-on-light #4d4d4d

Default status icon color (light theme)
--rh-color-icon-status-default-on-dark #4d4d4d

Default status icon color (dark theme)

Neutral

Ex. Token name Value Use case
--rh-color-icon-status-neutral-on-light #4d4d4d

Neutral status icon color (light theme)
--rh-color-icon-status-neutral-on-dark #c7c7c7

Neutral status icon color (dark theme)

Info

Ex. Token name Value Use case
--rh-color-icon-status-info-on-light #5e40be

Info status icon color (light theme)
--rh-color-icon-status-info-on-dark #b6a6e9

Info status icon color (dark theme)

Success

Ex. Token name Value Use case
--rh-color-icon-status-success-on-light #3d7317

Success status icon color (light theme)
--rh-color-icon-status-success-on-dark #87bb62

Success status icon color (dark theme)

Other libraries

To learn more about our other libraries, visit the getting started page.
Edit this page on GitHub