Icon
On this page
On this page
Overview
Icons represents general concepts and can support text as a decorative element. The icon element is a container that allows users to add icons of varying dimensions in the same area without shifting surrounding content.
Edit element properties
import "@rhds/elements/rh-icon/rh-icon.js";<rh-icon icon="hat"></rh-icon>Icon set
Icon name
Defines a string value that labels the icon element. Adds role="img" to element.
Controls how eager the element will be to load the icon data
eager: eagerly load the icon, blocking the main threadidle: wait for the browser to attain an idle state before loadinglazy(default): wait for the element to enter the viewport before loading
Status
What do these mean?
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
Planned
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
Icons and sets
<rh-icon> exclusively uses the official Red Hat brand icons.
Image of three icons
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in the RH Elements repo |
| RH Shared Libs |
|
Component should be added to the RH Shared Libs repo at a later date |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
