Skip to main content Red Hat Design System logo Contribute on Github v2.0.0 Home
About About the design systemHow we buildRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridPersonalization patternsSpacingTypography
Tokens Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries
Elements All elements Accordion Alert Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Call to action Card Code block Dialog Footer Health index Icon Navigation (primary)Planned Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Patterns All patternsAnnouncementCardDisclosureFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTabsTileVideo thumbnail
Accessibility FundamentalsContentDesignDevelopmentContributorsQa and testingAssistive technologiesResources
Design/code status Release notes Get support

Icon

Overview Style Guidelines Code Demos Accessibility
  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

© 2021-2024 Red Hat, Inc. Deploys by Netlify