Skip to content
PatternFly logo

Icon

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

Sizing content within the icon container

Use a size modifier on the icon container to maintain a consistent size, even if the contents change 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

Documentation

Overview

The icon element is a container used to maintain a stable space for an icon or spinner, regardless of size or aspect ratio of the contents.

Refer to the icons page for information about the PatternFly icon set and guidelines for use.

Usage

Class
Applied to
Outcome
.pf-c-icon
<span>, <div>
Initiates an icon component. Required
.pf-c-icon__content
<span>, <div>
Initiates the icon content. Required
.pf-c-icon__progress
<span>, <div>
Initiates a container for a progress spinner.
.pf-m-inline
.pf-c-icon
Displays the icon inline with text, and allows the icon to inherit the size and color of the parent.
.pf-m-[sm,md,lg,xl]
.pf-c-icon
Modifies the icon container to be small, medium, large, or extra large.
.pf-m-[sm,md,lg,xl]
.pf-c-icon__content, pf-c-icon__progress
Modifies the icon content or progress element to be small, medium, large, or extra large.
.pf-m-in-progress
.pf-c-icon
Shows the progress element in place of the icon content.
.pf-m-danger, .pf-m-warning, .pf-m-success, .pf-m-info, .pf-m-default
.pf-c-icon__content
Modifies the icon content to use a status color.

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