Icon

Overview Style Guidelines Code Demos Accessibility
  1. Overview
  2. Status
  3. Sample element
  4. When to use
  1. Overview
  2. Status
  3. Sample element
  4. When to use

Overview

Icons represents general concepts and can support text as a decorative element. The icon element, <rh-icon>, is a container that allows users to add icons of varying dimensions in the same area without shifting surrounding content.

Image of three icons

Status

What do these mean?
Figma library:
Ready
RH Elements:
Ready
RH Shared Libs:
Planned

Sample element

View the Red Hat Icons repo

When to use

  • When you want to supplement the meaning of text with a visual element
  • When you need to represent a UI function with an approved Red Hat icon
  • When you need an icon to occupy a certain amount of space

Status checklist

Property Status Meaning
Figma library Ready Component is available in the Figma library
RH Elements Ready Component is available in the RH Elements repo
RH Shared Libs Planned Component should be added to the RH Shared Libs repo at a later date
Edit this page on GitHub