Skip to content
PatternFly

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.

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-v5-c-icon
<span>, <div>
Initiates an icon component. Required
.pf-v5-c-icon__content
<span>, <div>
Initiates the icon content. Required
.pf-v5-c-icon__progress
<span>, <div>
Initiates a container for a progress spinner.
.pf-m-inline
.pf-v5-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-v5-c-icon
Modifies the icon container to be small, medium, large, or extra large.
.pf-m-[sm,md,lg,xl]
.pf-v5-c-icon__content, pf-v5-c-icon__progress
Modifies the icon content or progress element to be small, medium, large, or extra large.
.pf-m-in-progress
.pf-v5-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-custom
.pf-v5-c-icon__content
Modifies the icon content to use a status color.

CSS variables

Expand or collapse columnSelectorVariableValue
.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--pf-v5-c-icon--m-sm--Height
0.75rem
.pf-v5-c-icon--pf-v5-c-icon--m-md--Width
1rem
.pf-v5-c-icon--pf-v5-c-icon--m-md--Height
1rem
.pf-v5-c-icon--pf-v5-c-icon--m-lg--Width
1.5rem
.pf-v5-c-icon--pf-v5-c-icon--m-lg--Height
1.5rem
.pf-v5-c-icon--pf-v5-c-icon--m-xl--Width
3.375rem
.pf-v5-c-icon--pf-v5-c-icon--m-xl--Height
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--pf-v5-c-icon__content--m-warning--Color
#f0ab00
.pf-v5-c-icon--pf-v5-c-icon__content--m-success--Color
#3e8635
.pf-v5-c-icon--pf-v5-c-icon__content--m-info--Color
#2b9af3
.pf-v5-c-icon--pf-v5-c-icon__content--m-custom--Color
#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--pf-v5-c-icon--m-md__content--FontSize
1rem
.pf-v5-c-icon--pf-v5-c-icon--m-lg__content--FontSize
1.5rem
.pf-v5-c-icon--pf-v5-c-icon--m-xl__content--FontSize
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.pf-m-inline--pf-v5-c-icon--Height
1em
.pf-v5-c-icon.pf-m-inline--pf-v5-c-icon__content--FontSize
1em
.pf-v5-c-icon.pf-m-inline--pf-v5-c-icon__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.pf-m-sm--pf-v5-c-icon--Height
0.75rem
.pf-v5-c-icon.pf-m-sm--pf-v5-c-icon__content--FontSize
0.75rem
.pf-v5-c-icon.pf-m-md--pf-v5-c-icon--Width
1rem
.pf-v5-c-icon.pf-m-md--pf-v5-c-icon--Height
1rem
.pf-v5-c-icon.pf-m-md--pf-v5-c-icon__content--FontSize
1rem
.pf-v5-c-icon.pf-m-lg--pf-v5-c-icon--Width
1.5rem
.pf-v5-c-icon.pf-m-lg--pf-v5-c-icon--Height
1.5rem
.pf-v5-c-icon.pf-m-lg--pf-v5-c-icon__content--FontSize
1.5rem
.pf-v5-c-icon.pf-m-xl--pf-v5-c-icon--Width
3.375rem
.pf-v5-c-icon.pf-m-xl--pf-v5-c-icon--Height
3.375rem
.pf-v5-c-icon.pf-m-xl--pf-v5-c-icon__content--FontSize
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.pf-m-md--pf-v5-c-icon__content--FontSize
1rem
.pf-v5-c-icon__content.pf-m-lg--pf-v5-c-icon__content--FontSize
1.5rem
.pf-v5-c-icon__content.pf-m-xl--pf-v5-c-icon__content--FontSize
3.375rem
.pf-v5-c-icon__content.pf-m-danger--pf-v5-c-icon__content--Color
#c9190b
.pf-v5-c-icon__content.pf-m-warning--pf-v5-c-icon__content--Color
#f0ab00
.pf-v5-c-icon__content.pf-m-success--pf-v5-c-icon__content--Color
#3e8635
.pf-v5-c-icon__content.pf-m-info--pf-v5-c-icon__content--Color
#2b9af3
.pf-v5-c-icon__content.pf-m-custom--pf-v5-c-icon__content--Color
#73c5c5

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines