- React
- HTML

## 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

### 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