Icon tokens
Icon#
| 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 |
|
Icon#
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#
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
--rh-color-icon-subtle |
#707070
|
|
||
--rh-color-icon-subtle-hover |
#a3a3a3
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Red Hat legal and privacy links
- About Red Hat
- Jobs
- Events
- Locations
- Contact Red Hat
- Red Hat Blog
- Diversity, equity, and inclusion
- Cool Stuff Store
- Red Hat Summit
Red Hat legal and privacy links
