@patternfly/patternfly

--- id: 'Icon' section: components cssPrefix: pf-v6-c-icon ---## Examples ### Basic ```html ``` ### Standalone icon sizes ```html ``` ### Body sizes ```html ``` ### Heading sizes ```html ``` ### Status colors ```html ``` ### 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. ```html ``` ### Inline ```html <div class="pf-v6-c-content"> <h1> Heading </h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus. <h2> Second level </h2> 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 </div>Inline with size specified: small, medium, large, extra large ``` ### In progress ```html <svg class="pf-v6-c-spinner pf-m-md" role="progressbar" viewBox="0 0 100 100" aria-label="Loading..." > <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" /> </svg> ``` ## 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](/design-foundations/icons) page for information about the PatternFly icon set and guidelines for use. ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v6-c-icon` | ``, `<div>` | Initiates an icon component. **Required** | | `.pf-v6-c-icon__content` | ``, `<div>` | Initiates the icon content. **Required** | | `.pf-v6-c-icon__progress` | ``, `<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. |