Skip to content

Icon

An icon component is a container that supports icons of varying dimensions and styles, as well as spinners.

Examples

Basic

Standalone icon sizes

Body sizes

Heading 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-v6-c-icon
<span>, <div>
Initiates an icon component. Required
.pf-v6-c-icon__content
<span>, <div>
Initiates the icon content. Required
.pf-v6-c-icon__progress
<span>, <div>
Initiates a container for a progress spinner.
.pf-m-inline
.pf-v6-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,2xl,3xl]
.pf-v6-c-icon
Modifies the icon container to be small, medium, large, extra large, double extra large, or triple extra large.
.pf-m-body-[sm,default,lg]
.pf-v6-c-icon
Modifies the icon container to be a size matching small, default, or large body text.
.pf-m-heading-[sm,md,lg,xl,2xl,3xl]
.pf-v6-c-icon
Modifies the icon container to be a size matching small, medium, large, extra large, double extra large, or triple extra large (h6-h1) heading text.
.pf-m-[sm,md,lg,xl,2xl,3xl]
.pf-v6-c-icon__content, pf-v6-c-icon__progress
Modifies the icon content or progress element to be small, medium, large, or extra large.
.pf-m-body-[sm,default,lg]
.pf-v6-c-icon__content
Modifies the icon content or progress element to be a size matching small, default, or large body text.
.pf-m-heading-[sm,md,lg,xl,2xl,3xl]
.pf-v6-c-icon__content
Modifies the icon content or progress element to be a size matching small, medium, large, extra large, double extra large, or triple extra large (h6-h1) heading text.
.pf-m-in-progress
.pf-v6-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-v6-c-icon__content
Modifies the icon content to use a status color.

CSS variables

Expand or collapse columnSelectorVariableValue
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--Width
0.875rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--Height
0.875rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-sm--Width
0.75rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-sm--Height
0.75rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-md--Width
0.875rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-md--Height
0.875rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-lg--Width
1rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-lg--Height
1rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-xl--Width
1.375rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-xl--Height
1.375rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-2xl--Width
3.5rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-2xl--Height
3.5rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-3xl--Width
6rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-3xl--Height
6rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-body-sm--Width
0.75rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-body-sm--Height
0.75rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-body-default--Width
0.875rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-body-default--Height
0.875rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-body-lg--Width
1rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-body-lg--Height
1rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-heading-sm--Width
1rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-heading-sm--Height
1rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-heading-md--Width
1rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-heading-md--Height
1rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-heading-lg--Width
1rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-heading-lg--Height
1rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-heading-xl--Width
1.125rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-heading-xl--Height
1.125rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-heading-2xl--Width
1.25rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-heading-2xl--Height
1.25rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-heading-3xl--Width
1.375rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-heading-3xl--Height
1.375rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-inline--Width
1em
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-inline--Height
1em
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon__content--svg--VerticalAlign
-.125em
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon__content--Color
(In light theme) #1f1f1f
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon__content--m-danger--Color
(In light theme) #b1380b
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon__content--m-warning--Color
(In light theme) #dca614
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon__content--m-success--Color
(In light theme) #3d7317
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon__content--m-info--Color
(In light theme) #5e40be
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon__content--m-custom--Color
(In light theme) #147878
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-inline__content--Color
initial
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon__content--FontSize
0.875rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-sm__content--FontSize
0.75rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-md__content--FontSize
0.875rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-lg__content--FontSize
1rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-xl__content--FontSize
1.375rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-2xl__content--FontSize
3.5rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-3xl__content--FontSize
6rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-body-sm__content--FontSize
0.75rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-body-default__content--FontSize
0.875rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-body-lg__content--FontSize
1rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-heading-sm__content--FontSize
1rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-heading-md__content--FontSize
1rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-heading-lg__content--FontSize
1rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-heading-xl__content--FontSize
1.125rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-heading-2xl__content--FontSize
1.25rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-heading-3xl__content--FontSize
1.375rem
:where(:root, .pf-v6-c-icon)--pf-v6-c-icon--m-inline__content--FontSize
1em
.pf-v6-c-icon.pf-m-inline--pf-v6-c-icon--Width
1em
.pf-v6-c-icon.pf-m-inline--pf-v6-c-icon--Height
1em
.pf-v6-c-icon.pf-m-inline--pf-v6-c-icon__content--FontSize
1em
.pf-v6-c-icon.pf-m-inline--pf-v6-c-icon__content--Color
initial
.pf-v6-c-icon.pf-m-inline .pf-v6-c-spinner--pf-v6-c-spinner--diameter
1em
.pf-v6-c-icon.pf-m-sm--pf-v6-c-icon--Width
0.75rem
.pf-v6-c-icon.pf-m-sm--pf-v6-c-icon--Height
0.75rem
.pf-v6-c-icon.pf-m-sm--pf-v6-c-icon__content--FontSize
0.75rem
.pf-v6-c-icon.pf-m-md--pf-v6-c-icon--Width
0.875rem
.pf-v6-c-icon.pf-m-md--pf-v6-c-icon--Height
0.875rem
.pf-v6-c-icon.pf-m-md--pf-v6-c-icon__content--FontSize
0.875rem
.pf-v6-c-icon.pf-m-lg--pf-v6-c-icon--Width
1rem
.pf-v6-c-icon.pf-m-lg--pf-v6-c-icon--Height
1rem
.pf-v6-c-icon.pf-m-lg--pf-v6-c-icon__content--FontSize
1rem
.pf-v6-c-icon.pf-m-xl--pf-v6-c-icon--Width
1.375rem
.pf-v6-c-icon.pf-m-xl--pf-v6-c-icon--Height
1.375rem
.pf-v6-c-icon.pf-m-xl--pf-v6-c-icon__content--FontSize
1.375rem
.pf-v6-c-icon.pf-m-2xl--pf-v6-c-icon--Width
3.5rem
.pf-v6-c-icon.pf-m-2xl--pf-v6-c-icon--Height
3.5rem
.pf-v6-c-icon.pf-m-2xl--pf-v6-c-icon__content--FontSize
3.5rem
.pf-v6-c-icon.pf-m-3xl--pf-v6-c-icon--Width
6rem
.pf-v6-c-icon.pf-m-3xl--pf-v6-c-icon--Height
6rem
.pf-v6-c-icon.pf-m-3xl--pf-v6-c-icon__content--FontSize
6rem
.pf-v6-c-icon.pf-m-body-sm--pf-v6-c-icon--Width
0.75rem
.pf-v6-c-icon.pf-m-body-sm--pf-v6-c-icon--Height
0.75rem
.pf-v6-c-icon.pf-m-body-sm--pf-v6-c-icon__content--FontSize
0.75rem
.pf-v6-c-icon.pf-m-body-default--pf-v6-c-icon--Width
0.875rem
.pf-v6-c-icon.pf-m-body-default--pf-v6-c-icon--Height
0.875rem
.pf-v6-c-icon.pf-m-body-default--pf-v6-c-icon__content--FontSize
0.875rem
.pf-v6-c-icon.pf-m-body-lg--pf-v6-c-icon--Width
1rem
.pf-v6-c-icon.pf-m-body-lg--pf-v6-c-icon--Height
1rem
.pf-v6-c-icon.pf-m-body-lg--pf-v6-c-icon__content--FontSize
1rem
.pf-v6-c-icon.pf-m-heading-sm--pf-v6-c-icon--Width
1rem
.pf-v6-c-icon.pf-m-heading-sm--pf-v6-c-icon--Height
1rem
.pf-v6-c-icon.pf-m-heading-sm--pf-v6-c-icon__content--FontSize
1rem
.pf-v6-c-icon.pf-m-heading-md--pf-v6-c-icon--Width
1rem
.pf-v6-c-icon.pf-m-heading-md--pf-v6-c-icon--Height
1rem
.pf-v6-c-icon.pf-m-heading-md--pf-v6-c-icon__content--FontSize
1rem
.pf-v6-c-icon.pf-m-heading-lg--pf-v6-c-icon--Width
1rem
.pf-v6-c-icon.pf-m-heading-lg--pf-v6-c-icon--Height
1rem
.pf-v6-c-icon.pf-m-heading-lg--pf-v6-c-icon__content--FontSize
1rem
.pf-v6-c-icon.pf-m-heading-xl--pf-v6-c-icon--Width
1.125rem
.pf-v6-c-icon.pf-m-heading-xl--pf-v6-c-icon--Height
1.125rem
.pf-v6-c-icon.pf-m-heading-xl--pf-v6-c-icon__content--FontSize
1.125rem
.pf-v6-c-icon.pf-m-heading-2xl--pf-v6-c-icon--Width
1.25rem
.pf-v6-c-icon.pf-m-heading-2xl--pf-v6-c-icon--Height
1.25rem
.pf-v6-c-icon.pf-m-heading-2xl--pf-v6-c-icon__content--FontSize
1.25rem
.pf-v6-c-icon.pf-m-heading-3xl--pf-v6-c-icon--Width
1.375rem
.pf-v6-c-icon.pf-m-heading-3xl--pf-v6-c-icon--Height
1.375rem
.pf-v6-c-icon.pf-m-heading-3xl--pf-v6-c-icon__content--FontSize
1.375rem
.pf-v6-c-icon.pf-m-in-progress--pf-v6-c-icon__content--Opacity
0
.pf-v6-c-icon.pf-m-in-progress--pf-v6-c-icon__progress--Opacity
1
.pf-v6-c-icon__content.pf-m-sm--pf-v6-c-icon__content--FontSize
0.75rem
.pf-v6-c-icon__content.pf-m-md--pf-v6-c-icon__content--FontSize
0.875rem
.pf-v6-c-icon__content.pf-m-lg--pf-v6-c-icon__content--FontSize
1rem
.pf-v6-c-icon__content.pf-m-xl--pf-v6-c-icon__content--FontSize
1.375rem
.pf-v6-c-icon__content.pf-m-2xl--pf-v6-c-icon__content--FontSize
3.5rem
.pf-v6-c-icon__content.pf-m-3xl--pf-v6-c-icon__content--FontSize
6rem
.pf-v6-c-icon__content.pf-m-body-sm--pf-v6-c-icon__content--FontSize
0.75rem
.pf-v6-c-icon__content.pf-m-body-default--pf-v6-c-icon__content--FontSize
0.875rem
.pf-v6-c-icon__content.pf-m-body-lg--pf-v6-c-icon__content--FontSize
1rem
.pf-v6-c-icon__content.pf-m-heading-sm--pf-v6-c-icon__content--FontSize
1rem
.pf-v6-c-icon__content.pf-m-heading-md--pf-v6-c-icon__content--FontSize
1rem
.pf-v6-c-icon__content.pf-m-heading-lg--pf-v6-c-icon__content--FontSize
1rem
.pf-v6-c-icon__content.pf-m-heading-xl--pf-v6-c-icon__content--FontSize
1.125rem
.pf-v6-c-icon__content.pf-m-heading-2xl--pf-v6-c-icon__content--FontSize
1.25rem
.pf-v6-c-icon__content.pf-m-heading-3xl--pf-v6-c-icon__content--FontSize
1.375rem
.pf-v6-c-icon__content.pf-m-danger--pf-v6-c-icon__content--Color
(In light theme) #b1380b
.pf-v6-c-icon__content.pf-m-warning--pf-v6-c-icon__content--Color
(In light theme) #dca614
.pf-v6-c-icon__content.pf-m-success--pf-v6-c-icon__content--Color
(In light theme) #3d7317
.pf-v6-c-icon__content.pf-m-info--pf-v6-c-icon__content--Color
(In light theme) #5e40be
.pf-v6-c-icon__content.pf-m-custom--pf-v6-c-icon__content--Color
(In light theme) #147878

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