---
id: 'Icon'
section: components
cssPrefix: pf-v6-c-icon
---## Examples

### Basic

```html
<span class="pf-v6-c-icon">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-long-arrow-alt-down" aria-hidden="true"></i>
  </span>
</span>

<span class="pf-v6-c-icon">
  <span class="pf-v6-c-icon__content">
    <svg
      class="pf-v6-svg"
      fill="currentColor"
      viewBox="0 0 20 20"
      aria-hidden="true"
      role="img"
      width="1em"
      height="1em"
    >
      <path
        d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
      />
    </svg>
  </span>
</span>

<span class="pf-v6-c-icon">
  <span class="pf-v6-c-icon__content">
    <svg
      class="pf-v6-svg"
      fill="currentColor"
      viewBox="0 0 20 20"
      aria-hidden="true"
      role="img"
      width="1em"
      height="1em"
    >
      <path
        d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
      />
    </svg>
  </span>
</span>

<span class="pf-v6-c-icon">
  <span class="pf-v6-c-icon__content">
    <svg
      class="pf-v6-svg"
      fill="currentColor"
      viewBox="0 0 32 32"
      aria-hidden="true"
      role="img"
      width="1em"
      height="1em"
    >
      <path
        d="M26.463 16.845a9.635 9.635 0 0 0-.002-1.688l3.41-1.974a.5.5 0 0 0 .235-.548 14.47 14.47 0 0 0-4.142-7.167.5.5 0 0 0-.594-.07l-3.404 1.97c-.469-.326-.96-.61-1.466-.85V2.58a.5.5 0 0 0-.356-.48 14.662 14.662 0 0 0-8.288 0 .5.5 0 0 0-.356.48v3.944c-.513.245-1.003.528-1.462.846L6.63 5.397a.5.5 0 0 0-.594.07 14.47 14.47 0 0 0-4.142 7.168.5.5 0 0 0 .236.548l3.407 1.972a9.635 9.635 0 0 0 .002 1.688l-3.41 1.974a.5.5 0 0 0-.235.548 14.47 14.47 0 0 0 4.142 7.167c.16.154.405.18.594.07l3.404-1.97c.469.326.96.61 1.466.85v3.938a.5.5 0 0 0 .356.48c1.333.398 2.728.6 4.144.6s2.81-.202 4.144-.6a.5.5 0 0 0 .356-.48v-3.944a10.449 10.449 0 0 0 1.462-.846l3.408 1.973a.5.5 0 0 0 .594-.07 14.47 14.47 0 0 0 4.142-7.168.5.5 0 0 0-.236-.548l-3.407-1.972ZM16 21c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5Z"
      />
    </svg>
  </span>
</span>

```

### Standalone icon sizes

```html
<span class="pf-v6-c-icon pf-m-sm">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>
<span class="pf-v6-c-icon pf-m-md">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>
<span class="pf-v6-c-icon pf-m-lg">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>
<span class="pf-v6-c-icon pf-m-xl">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>
<span class="pf-v6-c-icon pf-m-2xl">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>
<span class="pf-v6-c-icon pf-m-3xl">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>

```

### Body sizes

```html
<span class="pf-v6-c-icon pf-m-body-sm">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>
<span class="pf-v6-c-icon pf-m-body-default">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>
<span class="pf-v6-c-icon pf-m-body-lg">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>

```

### Heading sizes

```html
<span class="pf-v6-c-icon pf-m-heading-sm">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>
<span class="pf-v6-c-icon pf-m-heading-md">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>
<span class="pf-v6-c-icon pf-m-heading-lg">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>
<span class="pf-v6-c-icon pf-m-heading-xl">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>
<span class="pf-v6-c-icon pf-m-heading-2xl">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>
<span class="pf-v6-c-icon pf-m-heading-3xl">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>

```

### Status colors

```html
<span class="pf-v6-c-icon">
  <span class="pf-v6-c-icon__content pf-m-danger">
    <svg
      class="pf-v6-svg"
      fill="currentColor"
      viewBox="0 0 32 32"
      aria-hidden="true"
      role="img"
      width="1em"
      height="1em"
    >
      <path
        d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
      />
    </svg>
  </span>
</span>
<span class="pf-v6-c-icon">
  <span class="pf-v6-c-icon__content pf-m-warning">
    <svg
      class="pf-v6-svg"
      fill="currentColor"
      viewBox="0 0 32 32"
      aria-hidden="true"
      role="img"
      width="1em"
      height="1em"
    >
      <path
        d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
      />
    </svg>
  </span>
</span>
<span class="pf-v6-c-icon">
  <span class="pf-v6-c-icon__content pf-m-success">
    <svg
      class="pf-v6-svg"
      fill="currentColor"
      viewBox="0 0 32 32"
      aria-hidden="true"
      role="img"
      width="1em"
      height="1em"
    >
      <path
        d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
      />
    </svg>
  </span>
</span>
<span class="pf-v6-c-icon">
  <span class="pf-v6-c-icon__content pf-m-info">
    <svg
      class="pf-v6-svg"
      fill="currentColor"
      viewBox="0 0 32 32"
      aria-hidden="true"
      role="img"
      width="1em"
      height="1em"
    >
      <path
        d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
      />
    </svg>
  </span>
</span>
<span class="pf-v6-c-icon">
  <span class="pf-v6-c-icon__content pf-m-custom">
    <svg
      class="pf-v6-svg"
      fill="currentColor"
      viewBox="0 0 32 32"
      aria-hidden="true"
      role="img"
      width="1em"
      height="1em"
    >
      <path
        d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
      />
    </svg>
  </span>
</span>

```

### 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
<span class="pf-v6-c-icon pf-m-3xl pf-m-inline">
  <span class="pf-v6-c-icon__content pf-m-lg">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>
<span class="pf-v6-c-icon pf-m-3xl pf-m-inline">
  <span class="pf-v6-c-icon__content pf-m-xl">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>
<span class="pf-v6-c-icon pf-m-3xl pf-m-inline">
  <span class="pf-v6-c-icon__content pf-m-2xl">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>
<span class="pf-v6-c-icon pf-m-3xl pf-m-inline">
  <span class="pf-v6-c-icon__content pf-m-3xl">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>

```

### Inline

```html
<div class="pf-v6-c-content">
  <h1>
    Heading
    <span class="pf-v6-c-icon pf-m-inline">
      <span class="pf-v6-c-icon__content">
        <i class="fas fa-plus-circle" aria-hidden="true"></i>
      </span>
    </span>
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
    Sed hendrerit nisi in cursus maximus.
  </p>
  <h2>
    Second level
    <span class="pf-v6-c-icon pf-m-inline">
      <span class="pf-v6-c-icon__content">
        <i class="fas fa-plus-circle" aria-hidden="true"></i>
      </span>
    </span>
  </h2>
  <p>
    <span class="pf-v6-c-icon pf-m-inline">
      <span class="pf-v6-c-icon__content">
        <i class="fas fa-plus-circle" aria-hidden="true"></i>
      </span>
    </span>
    Curabitur accumsan turpis pharetra
    <strong>
      augue tincidunt
      <span class="pf-v6-c-icon pf-m-inline">
        <span class="pf-v6-c-icon__content">
          <i class="fas fa-plus-circle" aria-hidden="true"></i>
        </span>
      </span>
    </strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel
    cursus venenatis. Suspendisse potenti.
  </p>
  <small>
    Sometimes you need small text
    <span class="pf-v6-c-icon pf-m-inline">
      <span class="pf-v6-c-icon__content">
        <i class="fas fa-plus-circle" aria-hidden="true"></i>
      </span>
    </span>
  </small>
</div>Inline with size specified:
<span class="pf-v6-c-icon pf-m-sm pf-m-inline">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>
small,
<span class="pf-v6-c-icon pf-m-md pf-m-inline">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>
medium,
<span class="pf-v6-c-icon pf-m-lg pf-m-inline">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>
large,
<span class="pf-v6-c-icon pf-m-xl pf-m-inline">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-plus-circle" aria-hidden="true"></i>
  </span>
</span>
extra large

```

### In progress

```html
<span class="pf-v6-c-icon pf-m-md pf-m-in-progress">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-check-circle" aria-hidden="true"></i>
  </span>
  <span class="pf-v6-c-icon__progress">
    <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>
  </span>
</span>

<span class="pf-v6-c-icon pf-m-md">
  <span class="pf-v6-c-icon__content">
    <i class="fas fa-check-circle" aria-hidden="true"></i>
  </span>
</span>

```

## 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](/foundations-and-styles/iconography) 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.  |
