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.

Toggle in progress state

Custom in progress icon

Toggle in progress state

Props

Icon

*required
Name	Type	Default	Description
children	React.ReactNode		Icon content
className	string		Additional classes applied to the icon container
defaultProgressArialabel	string	'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.
isInline	boolean	false	Indicates the icon is inline and should inherit the text font size and color. Overriden by size and iconSize properties.
isInProgress	boolean	false	Indicates the icon is in progress. Setting this property to true will swap the icon with the progressIcon.
progressIcon	React.ReactNode		Icon 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.
shouldMirrorRTL	boolean	false	Flag 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 column	Selector	Variable	Value
	.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

Edit this page on GitHub