---
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"
      viewBox="0 0 20 20"
      fill="currentColor"
      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"
      viewBox="0 0 20 20"
      fill="currentColor"
      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"
      viewBox="0 0 32 32"
      fill="currentColor"
      aria-hidden="true"
      role="img"
      width="1em"
      height="1em"
    >
      <path
        d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
      />
    </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"
      viewBox="0 0 32 32"
      fill="currentColor"
      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"
      viewBox="0 0 32 32"
      fill="currentColor"
      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"
      viewBox="0 0 32 32"
      fill="currentColor"
      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"
      viewBox="0 0 32 32"
      fill="currentColor"
      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"
      viewBox="0 0 32 32"
      fill="currentColor"
      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.  |
