Icon

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Style
  2. Theme
  3. Sizes
  1. Style
  2. Theme
  3. Sizes

Style

Our icons were designed to be simple, clean, and open. Four icon sets are available: standard, UI, microns, and social media.

Theme

Icons can be used in Red Hat’s brand red, black, and two shades of gray. Dark theme uses white instead of black. Blue can also be used for interactive icons. It’s not recommended to use Red Hat red for UI icons or microns.

Image of five icons in a light theme Image of a five icons in dark theme

View our design tokens for icon sizes

Sizes

Sizes can be set using <rh-icon> which places icons into a transparent square container to make each icon a standard size.

Helpful tip

<rh-icon> does not put icons in containers of other shapes or add background colors. Additional styling of the base container requires custom CSS.

 Image displaying icon standard size output.
Icon Set Size range
Standard (default) 24px - 100 pixels
UI 14px - 24 pixels
Micron 8px - 12 pixels
Social media 14px - 24 pixels

View our design tokens for icon sizes

Edit this page on GitHub