Examples
Status colors
The following example demonstrates the various status variants of an icon. Keep in mind that these icons are displayed out of a typical context, and that you should not rely on color alone to convey status to users.
Sizing an icon within the icon container
Providing both size and iconSize properties allows the icon container to maintain a consistent size, even if the icon changes in size.
In progress
Passing the isInProgress property will swap the icon to a progress icon. By default this progress icon will be a Spinner but may be customized or overriden using the progressIcon property.
Props
Icon
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Icon content | |
| className | string | Additional classes applied to the icon container | |
| defaultProgressArialabel | string | 'Loading...' | Aria-label for the default progress icon |
| iconSize | 'sm' | 'md' | 'lg' | 'xl' | Size of icon. Overrides the icon size set by the size property. | |
| isInline | boolean | false | Indicates the icon is inline and should inherit the text font size and color. Overriden by size and iconSize properties. |
| isInProgress | boolean | false | Indicates the icon is in progress. Setting this property to true will swap the icon with the progressIcon. |
| progressIcon | React.ReactNode | Icon when isInProgress is set to true. Defaults to a 1em spinner. | |
| progressIconSize | 'sm' | 'md' | 'lg' | 'xl' | Size of progress icon. Overrides the icon size set by the size property. | |
| shouldMirrorRTLBeta | boolean | false | Flag indicating whether the icon passed as children should be mirrored for right to left (RTL) languages. This will not mirror the icon passed to progressIcon. |
| size | 'sm' | 'md' | 'lg' | 'xl' | Size of the icon component container and icon. | |
| status | 'custom' | 'info' | 'success' | 'warning' | 'danger' | Status color of the icon |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-icon | --pf-v5-c-icon--Width | 1em | ||
| .pf-v5-c-icon | --pf-v5-c-icon--Height | 1em | ||
| .pf-v5-c-icon | --pf-v5-c-icon--m-sm--Width | 0.75rem | ||
--pf-v5-c-icon--m-sm--Width --pf-v5-global--icon--FontSize--sm $pf-v5-global--icon--FontSize--sm pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-icon | --pf-v5-c-icon--m-sm--Height | 0.75rem | ||
--pf-v5-c-icon--m-sm--Height --pf-v5-global--icon--FontSize--sm $pf-v5-global--icon--FontSize--sm pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-icon | --pf-v5-c-icon--m-md--Width | 1rem | ||
--pf-v5-c-icon--m-md--Width --pf-v5-global--icon--FontSize--md $pf-v5-global--icon--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-icon | --pf-v5-c-icon--m-md--Height | 1rem | ||
--pf-v5-c-icon--m-md--Height --pf-v5-global--icon--FontSize--md $pf-v5-global--icon--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-icon | --pf-v5-c-icon--m-lg--Width | 1.5rem | ||
--pf-v5-c-icon--m-lg--Width --pf-v5-global--icon--FontSize--lg $pf-v5-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem | ||||
| .pf-v5-c-icon | --pf-v5-c-icon--m-lg--Height | 1.5rem | ||
--pf-v5-c-icon--m-lg--Height --pf-v5-global--icon--FontSize--lg $pf-v5-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem | ||||
| .pf-v5-c-icon | --pf-v5-c-icon--m-xl--Width | 3.375rem | ||
--pf-v5-c-icon--m-xl--Width --pf-v5-global--icon--FontSize--xl $pf-v5-global--icon--FontSize--xl pf-font-prem(54px) 3.375rem | ||||
| .pf-v5-c-icon | --pf-v5-c-icon--m-xl--Height | 3.375rem | ||
--pf-v5-c-icon--m-xl--Height --pf-v5-global--icon--FontSize--xl $pf-v5-global--icon--FontSize--xl pf-font-prem(54px) 3.375rem | ||||
| .pf-v5-c-icon | --pf-v5-c-icon--m-inline--Width | 1em | ||
| .pf-v5-c-icon | --pf-v5-c-icon--m-inline--Height | 1em | ||
| .pf-v5-c-icon | --pf-v5-c-icon__content--svg--VerticalAlign | -.125em | ||
| .pf-v5-c-icon | --pf-v5-c-icon__content--Color | initial | ||
| .pf-v5-c-icon | --pf-v5-c-icon__content--m-danger--Color | #c9190b | ||
--pf-v5-c-icon__content--m-danger--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-icon | --pf-v5-c-icon__content--m-warning--Color | #f0ab00 | ||
--pf-v5-c-icon__content--m-warning--Color --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-icon | --pf-v5-c-icon__content--m-success--Color | #3e8635 | ||
--pf-v5-c-icon__content--m-success--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-icon | --pf-v5-c-icon__content--m-info--Color | #2b9af3 | ||
--pf-v5-c-icon__content--m-info--Color --pf-v5-global--info-color--100 $pf-v5-global--info-color--100 $pf-v5-color-blue-300 #2b9af3 | ||||
| .pf-v5-c-icon | --pf-v5-c-icon__content--m-custom--Color | #73c5c5 | ||
--pf-v5-c-icon__content--m-custom--Color --pf-v5-global--custom-color--100 $pf-v5-global--custom-color--100 $pf-v5-color-cyan-200 #73c5c5 | ||||
| .pf-v5-c-icon | --pf-v5-c-icon--m-inline__content--Color | initial | ||
| .pf-v5-c-icon | --pf-v5-c-icon__content--FontSize | 1em | ||
| .pf-v5-c-icon | --pf-v5-c-icon--m-sm__content--FontSize | 0.75rem | ||
--pf-v5-c-icon--m-sm__content--FontSize --pf-v5-global--icon--FontSize--sm $pf-v5-global--icon--FontSize--sm pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-icon | --pf-v5-c-icon--m-md__content--FontSize | 1rem | ||
--pf-v5-c-icon--m-md__content--FontSize --pf-v5-global--icon--FontSize--md $pf-v5-global--icon--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-icon | --pf-v5-c-icon--m-lg__content--FontSize | 1.5rem | ||
--pf-v5-c-icon--m-lg__content--FontSize --pf-v5-global--icon--FontSize--lg $pf-v5-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem | ||||
| .pf-v5-c-icon | --pf-v5-c-icon--m-xl__content--FontSize | 3.375rem | ||
--pf-v5-c-icon--m-xl__content--FontSize --pf-v5-global--icon--FontSize--xl $pf-v5-global--icon--FontSize--xl pf-font-prem(54px) 3.375rem | ||||
| .pf-v5-c-icon | --pf-v5-c-icon--m-inline__content--FontSize | 1em | ||
| .pf-v5-c-icon.pf-m-inline | --pf-v5-c-icon--Width | 1em | ||
--pf-v5-c-icon--Width --pf-v5-c-icon--m-inline--Width 1em | ||||
| .pf-v5-c-icon.pf-m-inline | --pf-v5-c-icon--Height | 1em | ||
--pf-v5-c-icon--Height --pf-v5-c-icon--m-inline--Height 1em | ||||
| .pf-v5-c-icon.pf-m-inline | --pf-v5-c-icon__content--FontSize | 1em | ||
--pf-v5-c-icon__content--FontSize --pf-v5-c-icon--m-inline__content--FontSize 1em | ||||
| .pf-v5-c-icon.pf-m-inline | --pf-v5-c-icon__content--Color | initial | ||
--pf-v5-c-icon__content--Color --pf-v5-c-icon--m-inline__content--Color initial | ||||
| .pf-v5-c-icon.pf-m-inline .pf-v5-c-spinner | --pf-v5-c-spinner--diameter | 1em | ||
| .pf-v5-c-icon.pf-m-sm | --pf-v5-c-icon--Width | 0.75rem | ||
--pf-v5-c-icon--Width --pf-v5-c-icon--m-sm--Width --pf-v5-global--icon--FontSize--sm $pf-v5-global--icon--FontSize--sm pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-icon.pf-m-sm | --pf-v5-c-icon--Height | 0.75rem | ||
--pf-v5-c-icon--Height --pf-v5-c-icon--m-sm--Height --pf-v5-global--icon--FontSize--sm $pf-v5-global--icon--FontSize--sm pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-icon.pf-m-sm | --pf-v5-c-icon__content--FontSize | 0.75rem | ||
--pf-v5-c-icon__content--FontSize --pf-v5-c-icon--m-sm__content--FontSize --pf-v5-global--icon--FontSize--sm $pf-v5-global--icon--FontSize--sm pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-icon.pf-m-md | --pf-v5-c-icon--Width | 1rem | ||
--pf-v5-c-icon--Width --pf-v5-c-icon--m-md--Width --pf-v5-global--icon--FontSize--md $pf-v5-global--icon--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-icon.pf-m-md | --pf-v5-c-icon--Height | 1rem | ||
--pf-v5-c-icon--Height --pf-v5-c-icon--m-md--Height --pf-v5-global--icon--FontSize--md $pf-v5-global--icon--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-icon.pf-m-md | --pf-v5-c-icon__content--FontSize | 1rem | ||
--pf-v5-c-icon__content--FontSize --pf-v5-c-icon--m-md__content--FontSize --pf-v5-global--icon--FontSize--md $pf-v5-global--icon--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-icon.pf-m-lg | --pf-v5-c-icon--Width | 1.5rem | ||
--pf-v5-c-icon--Width --pf-v5-c-icon--m-lg--Width --pf-v5-global--icon--FontSize--lg $pf-v5-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem | ||||
| .pf-v5-c-icon.pf-m-lg | --pf-v5-c-icon--Height | 1.5rem | ||
--pf-v5-c-icon--Height --pf-v5-c-icon--m-lg--Height --pf-v5-global--icon--FontSize--lg $pf-v5-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem | ||||
| .pf-v5-c-icon.pf-m-lg | --pf-v5-c-icon__content--FontSize | 1.5rem | ||
--pf-v5-c-icon__content--FontSize --pf-v5-c-icon--m-lg__content--FontSize --pf-v5-global--icon--FontSize--lg $pf-v5-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem | ||||
| .pf-v5-c-icon.pf-m-xl | --pf-v5-c-icon--Width | 3.375rem | ||
--pf-v5-c-icon--Width --pf-v5-c-icon--m-xl--Width --pf-v5-global--icon--FontSize--xl $pf-v5-global--icon--FontSize--xl pf-font-prem(54px) 3.375rem | ||||
| .pf-v5-c-icon.pf-m-xl | --pf-v5-c-icon--Height | 3.375rem | ||
--pf-v5-c-icon--Height --pf-v5-c-icon--m-xl--Height --pf-v5-global--icon--FontSize--xl $pf-v5-global--icon--FontSize--xl pf-font-prem(54px) 3.375rem | ||||
| .pf-v5-c-icon.pf-m-xl | --pf-v5-c-icon__content--FontSize | 3.375rem | ||
--pf-v5-c-icon__content--FontSize --pf-v5-c-icon--m-xl__content--FontSize --pf-v5-global--icon--FontSize--xl $pf-v5-global--icon--FontSize--xl pf-font-prem(54px) 3.375rem | ||||
| .pf-v5-c-icon.pf-m-in-progress | --pf-v5-c-icon__content--Opacity | 0 | ||
| .pf-v5-c-icon.pf-m-in-progress | --pf-v5-c-icon__progress--Opacity | 1 | ||
| .pf-v5-c-icon__content.pf-m-sm | --pf-v5-c-icon__content--FontSize | 0.75rem | ||
--pf-v5-c-icon__content--FontSize --pf-v5-c-icon--m-sm__content--FontSize --pf-v5-global--icon--FontSize--sm $pf-v5-global--icon--FontSize--sm pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-icon__content.pf-m-md | --pf-v5-c-icon__content--FontSize | 1rem | ||
--pf-v5-c-icon__content--FontSize --pf-v5-c-icon--m-md__content--FontSize --pf-v5-global--icon--FontSize--md $pf-v5-global--icon--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-icon__content.pf-m-lg | --pf-v5-c-icon__content--FontSize | 1.5rem | ||
--pf-v5-c-icon__content--FontSize --pf-v5-c-icon--m-lg__content--FontSize --pf-v5-global--icon--FontSize--lg $pf-v5-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem | ||||
| .pf-v5-c-icon__content.pf-m-xl | --pf-v5-c-icon__content--FontSize | 3.375rem | ||
--pf-v5-c-icon__content--FontSize --pf-v5-c-icon--m-xl__content--FontSize --pf-v5-global--icon--FontSize--xl $pf-v5-global--icon--FontSize--xl pf-font-prem(54px) 3.375rem | ||||
| .pf-v5-c-icon__content.pf-m-danger | --pf-v5-c-icon__content--Color | #c9190b | ||
--pf-v5-c-icon__content--Color --pf-v5-c-icon__content--m-danger--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-icon__content.pf-m-warning | --pf-v5-c-icon__content--Color | #f0ab00 | ||
--pf-v5-c-icon__content--Color --pf-v5-c-icon__content--m-warning--Color --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-icon__content.pf-m-success | --pf-v5-c-icon__content--Color | #3e8635 | ||
--pf-v5-c-icon__content--Color --pf-v5-c-icon__content--m-success--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-icon__content.pf-m-info | --pf-v5-c-icon__content--Color | #2b9af3 | ||
--pf-v5-c-icon__content--Color --pf-v5-c-icon__content--m-info--Color --pf-v5-global--info-color--100 $pf-v5-global--info-color--100 $pf-v5-color-blue-300 #2b9af3 | ||||
| .pf-v5-c-icon__content.pf-m-custom | --pf-v5-c-icon__content--Color | #73c5c5 | ||
--pf-v5-c-icon__content--Color --pf-v5-c-icon__content--m-custom--Color --pf-v5-global--custom-color--100 $pf-v5-global--custom-color--100 $pf-v5-color-cyan-200 #73c5c5 | ||||
View source on GitHub
