Icon

Examples

Basic

Standalone icon sizes

These are the standard options for sizing icons.

Body sizes

These size options are meant to make icons match the size of body text.

Heading sizes

These size options are meant to make icons match the size of heading text.

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' | '2xl' | '3xl' | 'headingSm' | 'headingMd' | 'headingLg' | 'headingXl' | 'heading_2xl' | 'heading_3xl' | 'bodySm' | 'bodyDefault' | 'bodyLg'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' | '2xl' | '3xl' | 'headingSm' | 'headingMd' | 'headingLg' | 'headingXl' | 'heading_2xl' | 'heading_3xl' | 'bodySm' | 'bodyDefault' | 'bodyLg'Size of progress icon. Overrides the icon size set by the size property.
shouldMirrorRTLbooleanfalseFlag 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' | '2xl' | '3xl' | 'headingSm' | 'headingMd' | 'headingLg' | 'headingXl' | 'heading_2xl' | 'heading_3xl' | 'bodySm' | 'bodyDefault' | 'bodyLg'Size of the icon component container and icon.
status'custom' | 'info' | 'success' | 'warning' | 'danger'Status color of the icon

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-icon--pf-v6-c-icon--Width
0.875rem
  • --pf-v6-c-icon--Width
  • --pf-t--global--icon--size--font--body--default
  • --pf-t--global--font--size--body--default
  • --pf-t--global--font--size--sm
  • --pf-t--global--font--size--200
  • 0.875rem
.pf-v6-c-icon--pf-v6-c-icon--Height
0.875rem
  • --pf-v6-c-icon--Height
  • --pf-t--global--icon--size--font--body--default
  • --pf-t--global--font--size--body--default
  • --pf-t--global--font--size--sm
  • --pf-t--global--font--size--200
  • 0.875rem
.pf-v6-c-icon--pf-v6-c-icon--m-sm--Width
0.75rem
  • --pf-v6-c-icon--m-sm--Width
  • --pf-t--global--icon--size--sm
  • --pf-t--global--icon--size--100
  • 0.75rem
.pf-v6-c-icon--pf-v6-c-icon--m-sm--Height
0.75rem
  • --pf-v6-c-icon--m-sm--Height
  • --pf-t--global--icon--size--sm
  • --pf-t--global--icon--size--100
  • 0.75rem
.pf-v6-c-icon--pf-v6-c-icon--m-md--Width
0.875rem
  • --pf-v6-c-icon--m-md--Width
  • --pf-t--global--icon--size--md
  • --pf-t--global--icon--size--200
  • 0.875rem
.pf-v6-c-icon--pf-v6-c-icon--m-md--Height
0.875rem
  • --pf-v6-c-icon--m-md--Height
  • --pf-t--global--icon--size--md
  • --pf-t--global--icon--size--200
  • 0.875rem
.pf-v6-c-icon--pf-v6-c-icon--m-lg--Width
1rem
  • --pf-v6-c-icon--m-lg--Width
  • --pf-t--global--icon--size--lg
  • --pf-t--global--icon--size--250
  • 1rem
.pf-v6-c-icon--pf-v6-c-icon--m-lg--Height
1rem
  • --pf-v6-c-icon--m-lg--Height
  • --pf-t--global--icon--size--lg
  • --pf-t--global--icon--size--250
  • 1rem
.pf-v6-c-icon--pf-v6-c-icon--m-xl--Width
1.5rem
  • --pf-v6-c-icon--m-xl--Width
  • --pf-t--global--icon--size--xl
  • --pf-t--global--icon--size--300
  • 1.5rem
.pf-v6-c-icon--pf-v6-c-icon--m-xl--Height
1.5rem
  • --pf-v6-c-icon--m-xl--Height
  • --pf-t--global--icon--size--xl
  • --pf-t--global--icon--size--300
  • 1.5rem
.pf-v6-c-icon--pf-v6-c-icon--m-2xl--Width
3.5rem
  • --pf-v6-c-icon--m-2xl--Width
  • --pf-t--global--icon--size--2xl
  • --pf-t--global--icon--size--400
  • 3.5rem
.pf-v6-c-icon--pf-v6-c-icon--m-2xl--Height
3.5rem
  • --pf-v6-c-icon--m-2xl--Height
  • --pf-t--global--icon--size--2xl
  • --pf-t--global--icon--size--400
  • 3.5rem
.pf-v6-c-icon--pf-v6-c-icon--m-3xl--Width
6rem
  • --pf-v6-c-icon--m-3xl--Width
  • --pf-t--global--icon--size--3xl
  • --pf-t--global--icon--size--500
  • 6rem
.pf-v6-c-icon--pf-v6-c-icon--m-3xl--Height
6rem
  • --pf-v6-c-icon--m-3xl--Height
  • --pf-t--global--icon--size--3xl
  • --pf-t--global--icon--size--500
  • 6rem
.pf-v6-c-icon--pf-v6-c-icon--m-body-sm--Width
0.75rem
  • --pf-v6-c-icon--m-body-sm--Width
  • --pf-t--global--icon--size--font--body--sm
  • --pf-t--global--font--size--body--sm
  • --pf-t--global--font--size--xs
  • --pf-t--global--font--size--100
  • 0.75rem
.pf-v6-c-icon--pf-v6-c-icon--m-body-sm--Height
0.75rem
  • --pf-v6-c-icon--m-body-sm--Height
  • --pf-t--global--icon--size--font--body--sm
  • --pf-t--global--font--size--body--sm
  • --pf-t--global--font--size--xs
  • --pf-t--global--font--size--100
  • 0.75rem
.pf-v6-c-icon--pf-v6-c-icon--m-body-default--Width
0.875rem
  • --pf-v6-c-icon--m-body-default--Width
  • --pf-t--global--icon--size--font--body--default
  • --pf-t--global--font--size--body--default
  • --pf-t--global--font--size--sm
  • --pf-t--global--font--size--200
  • 0.875rem
.pf-v6-c-icon--pf-v6-c-icon--m-body-default--Height
0.875rem
  • --pf-v6-c-icon--m-body-default--Height
  • --pf-t--global--icon--size--font--body--default
  • --pf-t--global--font--size--body--default
  • --pf-t--global--font--size--sm
  • --pf-t--global--font--size--200
  • 0.875rem
.pf-v6-c-icon--pf-v6-c-icon--m-body-lg--Width
1rem
  • --pf-v6-c-icon--m-body-lg--Width
  • --pf-t--global--icon--size--font--body--lg
  • --pf-t--global--font--size--body--lg
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon--pf-v6-c-icon--m-body-lg--Height
1rem
  • --pf-v6-c-icon--m-body-lg--Height
  • --pf-t--global--icon--size--font--body--lg
  • --pf-t--global--font--size--body--lg
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon--pf-v6-c-icon--m-heading-sm--Width
1rem
  • --pf-v6-c-icon--m-heading-sm--Width
  • --pf-t--global--icon--size--font--heading--h6
  • --pf-t--global--font--size--heading--h6
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon--pf-v6-c-icon--m-heading-sm--Height
1rem
  • --pf-v6-c-icon--m-heading-sm--Height
  • --pf-t--global--icon--size--font--heading--h6
  • --pf-t--global--font--size--heading--h6
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon--pf-v6-c-icon--m-heading-md--Width
1rem
  • --pf-v6-c-icon--m-heading-md--Width
  • --pf-t--global--icon--size--font--heading--h5
  • --pf-t--global--font--size--heading--h5
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon--pf-v6-c-icon--m-heading-md--Height
1rem
  • --pf-v6-c-icon--m-heading-md--Height
  • --pf-t--global--icon--size--font--heading--h5
  • --pf-t--global--font--size--heading--h5
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon--pf-v6-c-icon--m-heading-lg--Width
1rem
  • --pf-v6-c-icon--m-heading-lg--Width
  • --pf-t--global--icon--size--font--heading--h4
  • --pf-t--global--font--size--heading--h4
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon--pf-v6-c-icon--m-heading-lg--Height
1rem
  • --pf-v6-c-icon--m-heading-lg--Height
  • --pf-t--global--icon--size--font--heading--h4
  • --pf-t--global--font--size--heading--h4
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon--pf-v6-c-icon--m-heading-xl--Width
1.125rem
  • --pf-v6-c-icon--m-heading-xl--Width
  • --pf-t--global--icon--size--font--heading--h3
  • --pf-t--global--font--size--heading--h3
  • --pf-t--global--font--size--lg
  • --pf-t--global--font--size--400
  • 1.125rem
.pf-v6-c-icon--pf-v6-c-icon--m-heading-xl--Height
1.125rem
  • --pf-v6-c-icon--m-heading-xl--Height
  • --pf-t--global--icon--size--font--heading--h3
  • --pf-t--global--font--size--heading--h3
  • --pf-t--global--font--size--lg
  • --pf-t--global--font--size--400
  • 1.125rem
.pf-v6-c-icon--pf-v6-c-icon--m-heading-2xl--Width
1.25rem
  • --pf-v6-c-icon--m-heading-2xl--Width
  • --pf-t--global--icon--size--font--heading--h2
  • --pf-t--global--font--size--heading--h2
  • --pf-t--global--font--size--xl
  • --pf-t--global--font--size--500
  • 1.25rem
.pf-v6-c-icon--pf-v6-c-icon--m-heading-2xl--Height
1.25rem
  • --pf-v6-c-icon--m-heading-2xl--Height
  • --pf-t--global--icon--size--font--heading--h2
  • --pf-t--global--font--size--heading--h2
  • --pf-t--global--font--size--xl
  • --pf-t--global--font--size--500
  • 1.25rem
.pf-v6-c-icon--pf-v6-c-icon--m-heading-3xl--Width
1.5rem
  • --pf-v6-c-icon--m-heading-3xl--Width
  • --pf-t--global--icon--size--font--heading--h1
  • --pf-t--global--font--size--heading--h1
  • --pf-t--global--font--size--2xl
  • --pf-t--global--font--size--600
  • 1.5rem
.pf-v6-c-icon--pf-v6-c-icon--m-heading-3xl--Height
1.5rem
  • --pf-v6-c-icon--m-heading-3xl--Height
  • --pf-t--global--icon--size--font--heading--h1
  • --pf-t--global--font--size--heading--h1
  • --pf-t--global--font--size--2xl
  • --pf-t--global--font--size--600
  • 1.5rem
.pf-v6-c-icon--pf-v6-c-icon--m-inline--Width
1em
.pf-v6-c-icon--pf-v6-c-icon--m-inline--Height
1em
.pf-v6-c-icon--pf-v6-c-icon__content--svg--VerticalAlign
-.125em
.pf-v6-c-icon--pf-v6-c-icon__content--Color
(In light theme) #1f1f1f
  • --pf-v6-c-icon__content--Color
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--100
  • --pf-t--color--gray--90
  • #1f1f1f
.pf-v6-c-icon--pf-v6-c-icon__content--m-danger--Color
(In light theme) #b1380b
  • --pf-v6-c-icon__content--m-danger--Color
  • --pf-t--global--icon--color--status--danger--default
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--danger--100
  • --pf-t--color--red-orange--60
  • #b1380b
.pf-v6-c-icon--pf-v6-c-icon__content--m-warning--Color
(In light theme) #dca614
  • --pf-v6-c-icon__content--m-warning--Color
  • --pf-t--global--icon--color--status--warning--default
  • --pf-t--global--color--status--warning--200
  • --pf-t--color--yellow--40
  • #dca614
.pf-v6-c-icon--pf-v6-c-icon__content--m-success--Color
(In light theme) #3d7317
  • --pf-v6-c-icon__content--m-success--Color
  • --pf-t--global--icon--color--status--success--default
  • --pf-t--global--color--status--success--default
  • --pf-t--global--color--status--success--100
  • --pf-t--color--green--60
  • #3d7317
.pf-v6-c-icon--pf-v6-c-icon__content--m-info--Color
(In light theme) #5e40be
  • --pf-v6-c-icon__content--m-info--Color
  • --pf-t--global--icon--color--status--info--default
  • --pf-t--global--color--status--info--default
  • --pf-t--global--color--status--info--100
  • --pf-t--color--purple--50
  • #5e40be
.pf-v6-c-icon--pf-v6-c-icon__content--m-custom--Color
(In light theme) #147878
  • --pf-v6-c-icon__content--m-custom--Color
  • --pf-t--global--icon--color--status--custom--default
  • --pf-t--global--color--status--custom--default
  • --pf-t--global--color--status--custom--100
  • --pf-t--color--teal--60
  • #147878
.pf-v6-c-icon--pf-v6-c-icon--m-inline__content--Color
initial
.pf-v6-c-icon--pf-v6-c-icon__content--FontSize
0.875rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-t--global--icon--size--font--body--default
  • --pf-t--global--font--size--body--default
  • --pf-t--global--font--size--sm
  • --pf-t--global--font--size--200
  • 0.875rem
.pf-v6-c-icon--pf-v6-c-icon--m-sm__content--FontSize
0.75rem
  • --pf-v6-c-icon--m-sm__content--FontSize
  • --pf-t--global--icon--size--sm
  • --pf-t--global--icon--size--100
  • 0.75rem
.pf-v6-c-icon--pf-v6-c-icon--m-md__content--FontSize
0.875rem
  • --pf-v6-c-icon--m-md__content--FontSize
  • --pf-t--global--icon--size--md
  • --pf-t--global--icon--size--200
  • 0.875rem
.pf-v6-c-icon--pf-v6-c-icon--m-lg__content--FontSize
1rem
  • --pf-v6-c-icon--m-lg__content--FontSize
  • --pf-t--global--icon--size--lg
  • --pf-t--global--icon--size--250
  • 1rem
.pf-v6-c-icon--pf-v6-c-icon--m-xl__content--FontSize
1.5rem
  • --pf-v6-c-icon--m-xl__content--FontSize
  • --pf-t--global--icon--size--xl
  • --pf-t--global--icon--size--300
  • 1.5rem
.pf-v6-c-icon--pf-v6-c-icon--m-2xl__content--FontSize
3.5rem
  • --pf-v6-c-icon--m-2xl__content--FontSize
  • --pf-t--global--icon--size--2xl
  • --pf-t--global--icon--size--400
  • 3.5rem
.pf-v6-c-icon--pf-v6-c-icon--m-3xl__content--FontSize
6rem
  • --pf-v6-c-icon--m-3xl__content--FontSize
  • --pf-t--global--icon--size--3xl
  • --pf-t--global--icon--size--500
  • 6rem
.pf-v6-c-icon--pf-v6-c-icon--m-body-sm__content--FontSize
0.75rem
  • --pf-v6-c-icon--m-body-sm__content--FontSize
  • --pf-t--global--icon--size--font--body--sm
  • --pf-t--global--font--size--body--sm
  • --pf-t--global--font--size--xs
  • --pf-t--global--font--size--100
  • 0.75rem
.pf-v6-c-icon--pf-v6-c-icon--m-body-default__content--FontSize
0.875rem
  • --pf-v6-c-icon--m-body-default__content--FontSize
  • --pf-t--global--icon--size--font--body--default
  • --pf-t--global--font--size--body--default
  • --pf-t--global--font--size--sm
  • --pf-t--global--font--size--200
  • 0.875rem
.pf-v6-c-icon--pf-v6-c-icon--m-body-lg__content--FontSize
1rem
  • --pf-v6-c-icon--m-body-lg__content--FontSize
  • --pf-t--global--icon--size--font--body--lg
  • --pf-t--global--font--size--body--lg
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon--pf-v6-c-icon--m-heading-sm__content--FontSize
1rem
  • --pf-v6-c-icon--m-heading-sm__content--FontSize
  • --pf-t--global--icon--size--font--heading--h6
  • --pf-t--global--font--size--heading--h6
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon--pf-v6-c-icon--m-heading-md__content--FontSize
1rem
  • --pf-v6-c-icon--m-heading-md__content--FontSize
  • --pf-t--global--icon--size--font--heading--h5
  • --pf-t--global--font--size--heading--h5
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon--pf-v6-c-icon--m-heading-lg__content--FontSize
1rem
  • --pf-v6-c-icon--m-heading-lg__content--FontSize
  • --pf-t--global--icon--size--font--heading--h4
  • --pf-t--global--font--size--heading--h4
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon--pf-v6-c-icon--m-heading-xl__content--FontSize
1.125rem
  • --pf-v6-c-icon--m-heading-xl__content--FontSize
  • --pf-t--global--icon--size--font--heading--h3
  • --pf-t--global--font--size--heading--h3
  • --pf-t--global--font--size--lg
  • --pf-t--global--font--size--400
  • 1.125rem
.pf-v6-c-icon--pf-v6-c-icon--m-heading-2xl__content--FontSize
1.25rem
  • --pf-v6-c-icon--m-heading-2xl__content--FontSize
  • --pf-t--global--icon--size--font--heading--h2
  • --pf-t--global--font--size--heading--h2
  • --pf-t--global--font--size--xl
  • --pf-t--global--font--size--500
  • 1.25rem
.pf-v6-c-icon--pf-v6-c-icon--m-heading-3xl__content--FontSize
1.5rem
  • --pf-v6-c-icon--m-heading-3xl__content--FontSize
  • --pf-t--global--icon--size--font--heading--h1
  • --pf-t--global--font--size--heading--h1
  • --pf-t--global--font--size--2xl
  • --pf-t--global--font--size--600
  • 1.5rem
.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--Width
  • --pf-v6-c-icon--m-inline--Width
  • 1em
.pf-v6-c-icon.pf-m-inline--pf-v6-c-icon--Height
1em
  • --pf-v6-c-icon--Height
  • --pf-v6-c-icon--m-inline--Height
  • 1em
.pf-v6-c-icon.pf-m-inline--pf-v6-c-icon__content--FontSize
1em
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-inline__content--FontSize
  • 1em
.pf-v6-c-icon.pf-m-inline--pf-v6-c-icon__content--Color
initial
  • --pf-v6-c-icon__content--Color
  • --pf-v6-c-icon--m-inline__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--Width
  • --pf-v6-c-icon--m-sm--Width
  • --pf-t--global--icon--size--sm
  • --pf-t--global--icon--size--100
  • 0.75rem
.pf-v6-c-icon.pf-m-sm--pf-v6-c-icon--Height
0.75rem
  • --pf-v6-c-icon--Height
  • --pf-v6-c-icon--m-sm--Height
  • --pf-t--global--icon--size--sm
  • --pf-t--global--icon--size--100
  • 0.75rem
.pf-v6-c-icon.pf-m-sm--pf-v6-c-icon__content--FontSize
0.75rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-sm__content--FontSize
  • --pf-t--global--icon--size--sm
  • --pf-t--global--icon--size--100
  • 0.75rem
.pf-v6-c-icon.pf-m-md--pf-v6-c-icon--Width
0.875rem
  • --pf-v6-c-icon--Width
  • --pf-v6-c-icon--m-md--Width
  • --pf-t--global--icon--size--md
  • --pf-t--global--icon--size--200
  • 0.875rem
.pf-v6-c-icon.pf-m-md--pf-v6-c-icon--Height
0.875rem
  • --pf-v6-c-icon--Height
  • --pf-v6-c-icon--m-md--Height
  • --pf-t--global--icon--size--md
  • --pf-t--global--icon--size--200
  • 0.875rem
.pf-v6-c-icon.pf-m-md--pf-v6-c-icon__content--FontSize
0.875rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-md__content--FontSize
  • --pf-t--global--icon--size--md
  • --pf-t--global--icon--size--200
  • 0.875rem
.pf-v6-c-icon.pf-m-lg--pf-v6-c-icon--Width
1rem
  • --pf-v6-c-icon--Width
  • --pf-v6-c-icon--m-lg--Width
  • --pf-t--global--icon--size--lg
  • --pf-t--global--icon--size--250
  • 1rem
.pf-v6-c-icon.pf-m-lg--pf-v6-c-icon--Height
1rem
  • --pf-v6-c-icon--Height
  • --pf-v6-c-icon--m-lg--Height
  • --pf-t--global--icon--size--lg
  • --pf-t--global--icon--size--250
  • 1rem
.pf-v6-c-icon.pf-m-lg--pf-v6-c-icon__content--FontSize
1rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-lg__content--FontSize
  • --pf-t--global--icon--size--lg
  • --pf-t--global--icon--size--250
  • 1rem
.pf-v6-c-icon.pf-m-xl--pf-v6-c-icon--Width
1.5rem
  • --pf-v6-c-icon--Width
  • --pf-v6-c-icon--m-xl--Width
  • --pf-t--global--icon--size--xl
  • --pf-t--global--icon--size--300
  • 1.5rem
.pf-v6-c-icon.pf-m-xl--pf-v6-c-icon--Height
1.5rem
  • --pf-v6-c-icon--Height
  • --pf-v6-c-icon--m-xl--Height
  • --pf-t--global--icon--size--xl
  • --pf-t--global--icon--size--300
  • 1.5rem
.pf-v6-c-icon.pf-m-xl--pf-v6-c-icon__content--FontSize
1.5rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-xl__content--FontSize
  • --pf-t--global--icon--size--xl
  • --pf-t--global--icon--size--300
  • 1.5rem
.pf-v6-c-icon.pf-m-2xl--pf-v6-c-icon--Width
3.5rem
  • --pf-v6-c-icon--Width
  • --pf-v6-c-icon--m-2xl--Width
  • --pf-t--global--icon--size--2xl
  • --pf-t--global--icon--size--400
  • 3.5rem
.pf-v6-c-icon.pf-m-2xl--pf-v6-c-icon--Height
3.5rem
  • --pf-v6-c-icon--Height
  • --pf-v6-c-icon--m-2xl--Height
  • --pf-t--global--icon--size--2xl
  • --pf-t--global--icon--size--400
  • 3.5rem
.pf-v6-c-icon.pf-m-2xl--pf-v6-c-icon__content--FontSize
3.5rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-2xl__content--FontSize
  • --pf-t--global--icon--size--2xl
  • --pf-t--global--icon--size--400
  • 3.5rem
.pf-v6-c-icon.pf-m-3xl--pf-v6-c-icon--Width
6rem
  • --pf-v6-c-icon--Width
  • --pf-v6-c-icon--m-3xl--Width
  • --pf-t--global--icon--size--3xl
  • --pf-t--global--icon--size--500
  • 6rem
.pf-v6-c-icon.pf-m-3xl--pf-v6-c-icon--Height
6rem
  • --pf-v6-c-icon--Height
  • --pf-v6-c-icon--m-3xl--Height
  • --pf-t--global--icon--size--3xl
  • --pf-t--global--icon--size--500
  • 6rem
.pf-v6-c-icon.pf-m-3xl--pf-v6-c-icon__content--FontSize
6rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-3xl__content--FontSize
  • --pf-t--global--icon--size--3xl
  • --pf-t--global--icon--size--500
  • 6rem
.pf-v6-c-icon.pf-m-body-sm--pf-v6-c-icon--Width
0.75rem
  • --pf-v6-c-icon--Width
  • --pf-v6-c-icon--m-body-sm--Width
  • --pf-t--global--icon--size--font--body--sm
  • --pf-t--global--font--size--body--sm
  • --pf-t--global--font--size--xs
  • --pf-t--global--font--size--100
  • 0.75rem
.pf-v6-c-icon.pf-m-body-sm--pf-v6-c-icon--Height
0.75rem
  • --pf-v6-c-icon--Height
  • --pf-v6-c-icon--m-body-sm--Height
  • --pf-t--global--icon--size--font--body--sm
  • --pf-t--global--font--size--body--sm
  • --pf-t--global--font--size--xs
  • --pf-t--global--font--size--100
  • 0.75rem
.pf-v6-c-icon.pf-m-body-sm--pf-v6-c-icon__content--FontSize
0.75rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-body-sm__content--FontSize
  • --pf-t--global--icon--size--font--body--sm
  • --pf-t--global--font--size--body--sm
  • --pf-t--global--font--size--xs
  • --pf-t--global--font--size--100
  • 0.75rem
.pf-v6-c-icon.pf-m-body-default--pf-v6-c-icon--Width
0.875rem
  • --pf-v6-c-icon--Width
  • --pf-v6-c-icon--m-body-default--Width
  • --pf-t--global--icon--size--font--body--default
  • --pf-t--global--font--size--body--default
  • --pf-t--global--font--size--sm
  • --pf-t--global--font--size--200
  • 0.875rem
.pf-v6-c-icon.pf-m-body-default--pf-v6-c-icon--Height
0.875rem
  • --pf-v6-c-icon--Height
  • --pf-v6-c-icon--m-body-default--Height
  • --pf-t--global--icon--size--font--body--default
  • --pf-t--global--font--size--body--default
  • --pf-t--global--font--size--sm
  • --pf-t--global--font--size--200
  • 0.875rem
.pf-v6-c-icon.pf-m-body-default--pf-v6-c-icon__content--FontSize
0.875rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-body-default__content--FontSize
  • --pf-t--global--icon--size--font--body--default
  • --pf-t--global--font--size--body--default
  • --pf-t--global--font--size--sm
  • --pf-t--global--font--size--200
  • 0.875rem
.pf-v6-c-icon.pf-m-body-lg--pf-v6-c-icon--Width
1rem
  • --pf-v6-c-icon--Width
  • --pf-v6-c-icon--m-body-lg--Width
  • --pf-t--global--icon--size--font--body--lg
  • --pf-t--global--font--size--body--lg
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon.pf-m-body-lg--pf-v6-c-icon--Height
1rem
  • --pf-v6-c-icon--Height
  • --pf-v6-c-icon--m-body-lg--Height
  • --pf-t--global--icon--size--font--body--lg
  • --pf-t--global--font--size--body--lg
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon.pf-m-body-lg--pf-v6-c-icon__content--FontSize
1rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-lg__content--FontSize
  • --pf-t--global--icon--size--lg
  • --pf-t--global--icon--size--250
  • 1rem
.pf-v6-c-icon.pf-m-heading-sm--pf-v6-c-icon--Width
1rem
  • --pf-v6-c-icon--Width
  • --pf-v6-c-icon--m-heading-sm--Width
  • --pf-t--global--icon--size--font--heading--h6
  • --pf-t--global--font--size--heading--h6
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon.pf-m-heading-sm--pf-v6-c-icon--Height
1rem
  • --pf-v6-c-icon--Height
  • --pf-v6-c-icon--m-heading-sm--Height
  • --pf-t--global--icon--size--font--heading--h6
  • --pf-t--global--font--size--heading--h6
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon.pf-m-heading-sm--pf-v6-c-icon__content--FontSize
1rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-heading-sm__content--FontSize
  • --pf-t--global--icon--size--font--heading--h6
  • --pf-t--global--font--size--heading--h6
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon.pf-m-heading-md--pf-v6-c-icon--Width
1rem
  • --pf-v6-c-icon--Width
  • --pf-v6-c-icon--m-heading-md--Width
  • --pf-t--global--icon--size--font--heading--h5
  • --pf-t--global--font--size--heading--h5
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon.pf-m-heading-md--pf-v6-c-icon--Height
1rem
  • --pf-v6-c-icon--Height
  • --pf-v6-c-icon--m-heading-md--Height
  • --pf-t--global--icon--size--font--heading--h5
  • --pf-t--global--font--size--heading--h5
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon.pf-m-heading-md--pf-v6-c-icon__content--FontSize
1rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-heading-md__content--FontSize
  • --pf-t--global--icon--size--font--heading--h5
  • --pf-t--global--font--size--heading--h5
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon.pf-m-heading-lg--pf-v6-c-icon--Width
1rem
  • --pf-v6-c-icon--Width
  • --pf-v6-c-icon--m-heading-lg--Width
  • --pf-t--global--icon--size--font--heading--h4
  • --pf-t--global--font--size--heading--h4
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon.pf-m-heading-lg--pf-v6-c-icon--Height
1rem
  • --pf-v6-c-icon--Height
  • --pf-v6-c-icon--m-heading-lg--Height
  • --pf-t--global--icon--size--font--heading--h4
  • --pf-t--global--font--size--heading--h4
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon.pf-m-heading-lg--pf-v6-c-icon__content--FontSize
1rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-heading-lg__content--FontSize
  • --pf-t--global--icon--size--font--heading--h4
  • --pf-t--global--font--size--heading--h4
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon.pf-m-heading-xl--pf-v6-c-icon--Width
1.125rem
  • --pf-v6-c-icon--Width
  • --pf-v6-c-icon--m-heading-xl--Width
  • --pf-t--global--icon--size--font--heading--h3
  • --pf-t--global--font--size--heading--h3
  • --pf-t--global--font--size--lg
  • --pf-t--global--font--size--400
  • 1.125rem
.pf-v6-c-icon.pf-m-heading-xl--pf-v6-c-icon--Height
1.125rem
  • --pf-v6-c-icon--Height
  • --pf-v6-c-icon--m-heading-xl--Height
  • --pf-t--global--icon--size--font--heading--h3
  • --pf-t--global--font--size--heading--h3
  • --pf-t--global--font--size--lg
  • --pf-t--global--font--size--400
  • 1.125rem
.pf-v6-c-icon.pf-m-heading-xl--pf-v6-c-icon__content--FontSize
1.125rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-heading-xl__content--FontSize
  • --pf-t--global--icon--size--font--heading--h3
  • --pf-t--global--font--size--heading--h3
  • --pf-t--global--font--size--lg
  • --pf-t--global--font--size--400
  • 1.125rem
.pf-v6-c-icon.pf-m-heading-2xl--pf-v6-c-icon--Width
1.25rem
  • --pf-v6-c-icon--Width
  • --pf-v6-c-icon--m-heading-2xl--Width
  • --pf-t--global--icon--size--font--heading--h2
  • --pf-t--global--font--size--heading--h2
  • --pf-t--global--font--size--xl
  • --pf-t--global--font--size--500
  • 1.25rem
.pf-v6-c-icon.pf-m-heading-2xl--pf-v6-c-icon--Height
1.25rem
  • --pf-v6-c-icon--Height
  • --pf-v6-c-icon--m-heading-2xl--Height
  • --pf-t--global--icon--size--font--heading--h2
  • --pf-t--global--font--size--heading--h2
  • --pf-t--global--font--size--xl
  • --pf-t--global--font--size--500
  • 1.25rem
.pf-v6-c-icon.pf-m-heading-2xl--pf-v6-c-icon__content--FontSize
1.25rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-heading-2xl__content--FontSize
  • --pf-t--global--icon--size--font--heading--h2
  • --pf-t--global--font--size--heading--h2
  • --pf-t--global--font--size--xl
  • --pf-t--global--font--size--500
  • 1.25rem
.pf-v6-c-icon.pf-m-heading-3xl--pf-v6-c-icon--Width
1.5rem
  • --pf-v6-c-icon--Width
  • --pf-v6-c-icon--m-heading-3xl--Width
  • --pf-t--global--icon--size--font--heading--h1
  • --pf-t--global--font--size--heading--h1
  • --pf-t--global--font--size--2xl
  • --pf-t--global--font--size--600
  • 1.5rem
.pf-v6-c-icon.pf-m-heading-3xl--pf-v6-c-icon--Height
1.5rem
  • --pf-v6-c-icon--Height
  • --pf-v6-c-icon--m-heading-3xl--Height
  • --pf-t--global--icon--size--font--heading--h1
  • --pf-t--global--font--size--heading--h1
  • --pf-t--global--font--size--2xl
  • --pf-t--global--font--size--600
  • 1.5rem
.pf-v6-c-icon.pf-m-heading-3xl--pf-v6-c-icon__content--FontSize
1.5rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-heading-3xl__content--FontSize
  • --pf-t--global--icon--size--font--heading--h1
  • --pf-t--global--font--size--heading--h1
  • --pf-t--global--font--size--2xl
  • --pf-t--global--font--size--600
  • 1.5rem
.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--FontSize
  • --pf-v6-c-icon--m-sm__content--FontSize
  • --pf-t--global--icon--size--sm
  • --pf-t--global--icon--size--100
  • 0.75rem
.pf-v6-c-icon__content.pf-m-md--pf-v6-c-icon__content--FontSize
0.875rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-md__content--FontSize
  • --pf-t--global--icon--size--md
  • --pf-t--global--icon--size--200
  • 0.875rem
.pf-v6-c-icon__content.pf-m-lg--pf-v6-c-icon__content--FontSize
1rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-lg__content--FontSize
  • --pf-t--global--icon--size--lg
  • --pf-t--global--icon--size--250
  • 1rem
.pf-v6-c-icon__content.pf-m-xl--pf-v6-c-icon__content--FontSize
1.5rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-xl__content--FontSize
  • --pf-t--global--icon--size--xl
  • --pf-t--global--icon--size--300
  • 1.5rem
.pf-v6-c-icon__content.pf-m-2xl--pf-v6-c-icon__content--FontSize
3.5rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-2xl__content--FontSize
  • --pf-t--global--icon--size--2xl
  • --pf-t--global--icon--size--400
  • 3.5rem
.pf-v6-c-icon__content.pf-m-3xl--pf-v6-c-icon__content--FontSize
6rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-3xl__content--FontSize
  • --pf-t--global--icon--size--3xl
  • --pf-t--global--icon--size--500
  • 6rem
.pf-v6-c-icon__content.pf-m-body-sm--pf-v6-c-icon__content--FontSize
0.75rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-body-sm__content--FontSize
  • --pf-t--global--icon--size--font--body--sm
  • --pf-t--global--font--size--body--sm
  • --pf-t--global--font--size--xs
  • --pf-t--global--font--size--100
  • 0.75rem
.pf-v6-c-icon__content.pf-m-body-default--pf-v6-c-icon__content--FontSize
0.875rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-md__content--FontSize
  • --pf-t--global--icon--size--md
  • --pf-t--global--icon--size--200
  • 0.875rem
.pf-v6-c-icon__content.pf-m-body-lg--pf-v6-c-icon__content--FontSize
1rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-lg__content--FontSize
  • --pf-t--global--icon--size--lg
  • --pf-t--global--icon--size--250
  • 1rem
.pf-v6-c-icon__content.pf-m-heading-sm--pf-v6-c-icon__content--FontSize
1rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-heading-sm__content--FontSize
  • --pf-t--global--icon--size--font--heading--h6
  • --pf-t--global--font--size--heading--h6
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon__content.pf-m-heading-md--pf-v6-c-icon__content--FontSize
1rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-heading-md__content--FontSize
  • --pf-t--global--icon--size--font--heading--h5
  • --pf-t--global--font--size--heading--h5
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon__content.pf-m-heading-lg--pf-v6-c-icon__content--FontSize
1rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-heading-lg__content--FontSize
  • --pf-t--global--icon--size--font--heading--h4
  • --pf-t--global--font--size--heading--h4
  • --pf-t--global--font--size--md
  • --pf-t--global--font--size--300
  • 1rem
.pf-v6-c-icon__content.pf-m-heading-xl--pf-v6-c-icon__content--FontSize
1.125rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-heading-xl__content--FontSize
  • --pf-t--global--icon--size--font--heading--h3
  • --pf-t--global--font--size--heading--h3
  • --pf-t--global--font--size--lg
  • --pf-t--global--font--size--400
  • 1.125rem
.pf-v6-c-icon__content.pf-m-heading-2xl--pf-v6-c-icon__content--FontSize
1.25rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-heading-2xl__content--FontSize
  • --pf-t--global--icon--size--font--heading--h2
  • --pf-t--global--font--size--heading--h2
  • --pf-t--global--font--size--xl
  • --pf-t--global--font--size--500
  • 1.25rem
.pf-v6-c-icon__content.pf-m-heading-3xl--pf-v6-c-icon__content--FontSize
1.5rem
  • --pf-v6-c-icon__content--FontSize
  • --pf-v6-c-icon--m-heading-3xl__content--FontSize
  • --pf-t--global--icon--size--font--heading--h1
  • --pf-t--global--font--size--heading--h1
  • --pf-t--global--font--size--2xl
  • --pf-t--global--font--size--600
  • 1.5rem
.pf-v6-c-icon__content.pf-m-danger--pf-v6-c-icon__content--Color
(In light theme) #b1380b
  • --pf-v6-c-icon__content--Color
  • --pf-v6-c-icon__content--m-danger--Color
  • --pf-t--global--icon--color--status--danger--default
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--danger--100
  • --pf-t--color--red-orange--60
  • #b1380b
.pf-v6-c-icon__content.pf-m-warning--pf-v6-c-icon__content--Color
(In light theme) #dca614
  • --pf-v6-c-icon__content--Color
  • --pf-v6-c-icon__content--m-warning--Color
  • --pf-t--global--icon--color--status--warning--default
  • --pf-t--global--color--status--warning--200
  • --pf-t--color--yellow--40
  • #dca614
.pf-v6-c-icon__content.pf-m-success--pf-v6-c-icon__content--Color
(In light theme) #3d7317
  • --pf-v6-c-icon__content--Color
  • --pf-v6-c-icon__content--m-success--Color
  • --pf-t--global--icon--color--status--success--default
  • --pf-t--global--color--status--success--default
  • --pf-t--global--color--status--success--100
  • --pf-t--color--green--60
  • #3d7317
.pf-v6-c-icon__content.pf-m-info--pf-v6-c-icon__content--Color
(In light theme) #5e40be
  • --pf-v6-c-icon__content--Color
  • --pf-v6-c-icon__content--m-info--Color
  • --pf-t--global--icon--color--status--info--default
  • --pf-t--global--color--status--info--default
  • --pf-t--global--color--status--info--100
  • --pf-t--color--purple--50
  • #5e40be
.pf-v6-c-icon__content.pf-m-custom--pf-v6-c-icon__content--Color
(In light theme) #147878
  • --pf-v6-c-icon__content--Color
  • --pf-v6-c-icon__content--m-custom--Color
  • --pf-t--global--icon--color--status--custom--default
  • --pf-t--global--color--status--custom--default
  • --pf-t--global--color--status--custom--100
  • --pf-t--color--teal--60
  • #147878