Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographySpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Icon tokens

ColorColor
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 --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 light-dark(var(--rh-color-icon-primary-on-light, #ee0000), var(--rh-color-icon-primary-on-dark, #ee0000))

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.
--rh-color-icon-primary-on-light #ee0000
--rh-color-icon-primary-on-dark #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
--rh-color-icon-secondary light-dark(var(--rh-color-icon-secondary-on-light, #151515), var(--rh-color-icon-secondary-on-dark, #ffffff))

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.
--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

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 light-dark(var(--rh-color-icon-status-danger-on-light, #b1380b), var(--rh-color-icon-status-danger-on-dark, #f0561d))

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.
--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

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 light-dark(var(--rh-color-icon-status-caution-on-light, #ca6c0f), var(--rh-color-icon-status-caution-on-dark, #f5921b))

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.
--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

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 light-dark(var(--rh-color-icon-status-warning-on-light, #dca614), var(--rh-color-icon-status-warning-on-dark, #ffcc17))

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.
--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

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 light-dark(var(--rh-color-icon-status-default-on-light, #4d4d4d), var(--rh-color-icon-status-default-on-dark, #4d4d4d))

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.
--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

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 light-dark(var(--rh-color-icon-status-neutral-on-light, #4d4d4d), var(--rh-color-icon-status-neutral-on-dark, #c7c7c7))

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.
--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

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 light-dark(var(--rh-color-icon-status-info-on-light, #5e40be), var(--rh-color-icon-status-info-on-dark, #b6a6e9))

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.
--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

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 light-dark(var(--rh-color-icon-status-success-on-light, #3d7317), var(--rh-color-icon-status-success-on-dark, #87bb62))

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.
--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
© 2021-2025 Red Hat, Inc. Deploys by Netlify