Skip to content
Patternfly Logo

Icon

An icon component is a container that allows for icons of varying dimensions, as well as spinners, to seamlessly replace each other without shifting surrounding content.

PatternFly's icons guidelines contain PatternFly's icon set, as well as more information about icon usage.

Info alert:Beta feature

This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.

Examples

Basic

Sizes

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.

Inline

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.

Second level

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti.

Sometimes you need small text Inline with size specified: small, medium, large, extra large

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.

Custom in progress icon

Props

Icon

*required
NameTypeDefaultDescription
childrenReact.ReactNodeIcon content
classNamestringAdditional classes applied to the icon container
defaultProgressArialabelstring'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.
isInlinebooleanfalseIndicates the icon is inline and should inherit the text font size and color. Overriden by size and iconSize properties.
isInProgressbooleanfalseIndicates the icon is in progress. Setting this property to true will swap the icon with the progressIcon.
progressIconReact.ReactNodeIcon 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.
size'sm' | 'md' | 'lg' | 'xl'Size of the icon component container and icon.
status'default' | 'info' | 'success' | 'warning' | 'danger'Status color of the icon

CSS variables

.pf-c-icon--pf-c-icon--Width
1.125rem
.pf-c-icon--pf-c-icon--Height
1.125rem
.pf-c-icon--pf-c-icon--m-inline--Width
1em
.pf-c-icon--pf-c-icon--m-inline--Height
1em
.pf-c-icon--pf-c-icon--m-sm--Width
0.625rem
.pf-c-icon--pf-c-icon--m-md--Width
1.125rem
.pf-c-icon--pf-c-icon--m-lg--Width
1.5rem
.pf-c-icon--pf-c-icon--m-xl--Width
3.375rem
.pf-c-icon--pf-c-icon--m-sm--Height
0.625rem
.pf-c-icon--pf-c-icon--m-md--Height
1.125rem
.pf-c-icon--pf-c-icon--m-lg--Height
1.5rem
.pf-c-icon--pf-c-icon--m-xl--Height
3.375rem
.pf-c-icon--pf-c-icon__content--Color
#151515
.pf-c-icon--pf-c-icon__content--m-danger--Color
#c9190b
.pf-c-icon--pf-c-icon__content--m-warning--Color
#f0ab00
.pf-c-icon--pf-c-icon__content--m-success--Color
#3e8635
.pf-c-icon--pf-c-icon__content--m-info--Color
#2b9af3
.pf-c-icon--pf-c-icon__content--m-default--Color
#73c5c5
.pf-c-icon--pf-c-icon__content--FontSize
1.125rem
.pf-c-icon--pf-c-icon--m-inline__content--FontSize
1em
.pf-c-icon--pf-c-icon__content--svg--VerticalAlign
-.125em
.pf-c-icon--pf-c-icon--m-sm--content--FontSize
0.625rem
.pf-c-icon--pf-c-icon--m-md--content--FontSize
1.125rem
.pf-c-icon--pf-c-icon--m-lg--content--FontSize
1.5rem
.pf-c-icon--pf-c-icon--m-xl--content--FontSize
3.375rem
.pf-c-icon.pf-m-inline--pf-c-icon--Width
1em
.pf-c-icon.pf-m-inline--pf-c-icon--Height
1em
.pf-c-icon.pf-m-inline--pf-c-icon__content--FontSize
1em
.pf-c-icon.pf-m-inline--pf-c-icon__content--Color
currentcolor
.pf-c-icon.pf-m-inline .pf-c-spinner--pf-c-spinner--diameter
1em
.pf-c-icon.pf-m-sm--pf-c-icon--Width
0.625rem
.pf-c-icon.pf-m-sm--pf-c-icon--Height
0.625rem
.pf-c-icon.pf-m-sm--pf-c-icon__content--FontSize
0.625rem
.pf-c-icon.pf-m-md--pf-c-icon--Width
1.125rem
.pf-c-icon.pf-m-md--pf-c-icon--Height
1.125rem
.pf-c-icon.pf-m-md--pf-c-icon__content--FontSize
1.125rem
.pf-c-icon.pf-m-lg--pf-c-icon--Width
1.5rem
.pf-c-icon.pf-m-lg--pf-c-icon--Height
1.5rem
.pf-c-icon.pf-m-lg--pf-c-icon__content--FontSize
1.5rem
.pf-c-icon.pf-m-xl--pf-c-icon--Width
3.375rem
.pf-c-icon.pf-m-xl--pf-c-icon--Height
3.375rem
.pf-c-icon.pf-m-xl--pf-c-icon__content--FontSize
3.375rem
.pf-c-icon.pf-m-in-progress--pf-c-icon__content--Opacity
0
.pf-c-icon.pf-m-in-progress--pf-c-icon__progress--Opacity
1
.pf-c-icon__content.pf-m-sm--pf-c-icon__content--FontSize
0.625rem
.pf-c-icon__content.pf-m-md--pf-c-icon__content--FontSize
1.125rem
.pf-c-icon__content.pf-m-lg--pf-c-icon__content--FontSize
1.5rem
.pf-c-icon__content.pf-m-xl--pf-c-icon__content--FontSize
3.375rem
.pf-c-icon__content.pf-m-danger--pf-c-icon__content--Color
#c9190b
.pf-c-icon__content.pf-m-warning--pf-c-icon__content--Color
#f0ab00
.pf-c-icon__content.pf-m-success--pf-c-icon__content--Color
#3e8635
.pf-c-icon__content.pf-m-info--pf-c-icon__content--Color
#2b9af3
.pf-c-icon__content.pf-m-default--pf-c-icon__content--Color
#73c5c5

View source on GitHub