Icon tokens
Icon
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
Click to copy
--rh-size-icon-01 |
Click to copy
16px |
16px icon box |
var(--rh-size-icon-01, 16px)
https://ux.redhat.com/tokens/icon/#rh-size-icon-01
|
|
Click to copy
--rh-size-icon-02 |
Click to copy
24px |
24px icon box |
var(--rh-size-icon-02, 24px)
https://ux.redhat.com/tokens/icon/#rh-size-icon-02
|
|
Click to copy
--rh-size-icon-03 |
Click to copy
32px |
32px icon box |
var(--rh-size-icon-03, 32px)
https://ux.redhat.com/tokens/icon/#rh-size-icon-03
|
|
Click to copy
--rh-size-icon-04 |
Click to copy
40px |
40px icon box |
var(--rh-size-icon-04, 40px)
https://ux.redhat.com/tokens/icon/#rh-size-icon-04
|
|
Click to copy
--rh-size-icon-05 |
Click to copy
48px |
48px icon box |
var(--rh-size-icon-05, 48px)
https://ux.redhat.com/tokens/icon/#rh-size-icon-05
|
|
Click to copy
--rh-size-icon-06 |
Click to copy
64px |
64px icon box |
var(--rh-size-icon-06, 64px)
https://ux.redhat.com/tokens/icon/#rh-size-icon-06
|
|
Click to copy
--rh-size-icon-07 |
Click to copy
80px |
80px icon box |
var(--rh-size-icon-07, 80px)
https://ux.redhat.com/tokens/icon/#rh-size-icon-07
|
|
Click to copy
--rh-size-icon-08 |
Click to copy
96px |
96px icon box |
var(--rh-size-icon-08, 96px)
https://ux.redhat.com/tokens/icon/#rh-size-icon-08
|
|
Click to copy
--rh-size-icon-09 |
Click to copy
128px |
128px icon box |
var(--rh-size-icon-09, 128px)
https://ux.redhat.com/tokens/icon/#rh-size-icon-09
|
Icon
Primary
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
Click to copy
--rh-color-icon-primary-on-light |
Click to copy
#ee0000 |
var(--rh-color-icon-primary-on-light, #ee0000)
https://ux.redhat.com/tokens/icon/#rh-color-icon-primary-on-light
|
||
Click to copy
--rh-color-icon-primary-on-dark |
Click to copy
#ee0000 |
var(--rh-color-icon-primary-on-dark, #ee0000)
https://ux.redhat.com/tokens/icon/#rh-color-icon-primary-on-dark
|
Secondary
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
Click to copy
--rh-color-icon-secondary-on-light |
Click to copy
#151515 |
var(--rh-color-icon-secondary-on-light, #151515)
https://ux.redhat.com/tokens/icon/#rh-color-icon-secondary-on-light
|
||
Click to copy
--rh-color-icon-secondary-on-dark |
Click to copy
#ffffff |
var(--rh-color-icon-secondary-on-dark, #ffffff)
https://ux.redhat.com/tokens/icon/#rh-color-icon-secondary-on-dark
|
Subtle
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
Click to copy
--rh-color-icon-subtle |
Click to copy
#707070 |
var(--rh-color-icon-subtle, #707070)
https://ux.redhat.com/tokens/icon/#rh-color-icon-subtle
|
||
Click to copy
--rh-color-icon-subtle-hover |
Click to copy
#a3a3a3 |
var(--rh-color-icon-subtle-hover, #a3a3a3)
https://ux.redhat.com/tokens/icon/#rh-color-icon-subtle-hover
|
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 this page.
