Icon tokens

Icon#

Ex. Token name Value Use case
16px icon box var(--rh-size-icon-01, 16px) Copy Link
24px icon box var(--rh-size-icon-02, 24px) Copy Link
32px icon box var(--rh-size-icon-03, 32px) Copy Link
40px icon box var(--rh-size-icon-04, 40px) Copy Link
48px icon box var(--rh-size-icon-05, 48px) Copy Link
64px icon box var(--rh-size-icon-06, 64px) Copy Link
80px icon box var(--rh-size-icon-07, 80px) Copy Link
96px icon box var(--rh-size-icon-08, 96px) Copy Link
128px icon box var(--rh-size-icon-09, 128px) Copy Link

Icon#

Primary#

Ex. Token name Value Use case
var(--rh-color-icon-primary-on-light, #ee0000) Copy Link
var(--rh-color-icon-primary-on-dark, #ff442b) Copy Link

Secondary#

Ex. Token name Value Use case
var(--rh-color-icon-secondary-on-light, #151515) Copy Link
var(--rh-color-icon-secondary-on-dark, #ffffff) Copy Link

Subtle#

Ex. Token name Value Use case
var(--rh-color-icon-subtle, #707070) Copy Link
var(--rh-color-icon-subtle-hover, #a3a3a3) Copy Link
© 2021-2023 Red Hat, Inc. Deploys by Netlify
Scroll back to the top