# SVG Sprites

Learn how to use Font Awesome icons as SVG sprites for efficient rendering.

> Looking to use Font Awesome icons as SVG Sprites? We've got 'em. And there's no need to load JavaScript code at runtime.

We'll cover the basic of adding icons as SVG sprites, and cover the sticking points of using SVG sprites to help you ensure your projects are a good fit for their use.

Make sure you've:

- Found the SVG sprite files in the [Font Awesome Download](https://fontawesome.com/download).
- Confirmed that the [known issues](#issues-with-svg-sprites) won't cause you trouble.

## Select the Sprite Files

Inside the [Free](https://fontawesome.com/search?ic=free), [Pro](https://fontawesome.com/search?ic=pro-collection), or [Pro+](https://fontawesome.com/search?ic=pro-plus-collection) [Font Awesome Download](https://fontawesome.com/download) or [package](/web/setup/packages.md) you've got, you'll find the files you need in a couple of different sets of assets.

| Format   | Folder          | What's the difference?                                                                                             | Impact on Rendering                                                       |
| -------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- |
| SVG      | `/sprites`      | SVG `viewbox` `width` and `height` are cropped to the edges of the interior symbol.                                | Icons will only take up as much space as their dimensions need.           |
| Full SVG | `/sprites-full` | SVG `viewbox` `width` and `height` are set to a standard square based on the [Icon Canvas](/web/style/icon-canvas.md) | Icons will be rendered at a consistent width with surrounding whitespace. |

  <h4>
    Parity Across Icon Packs
  </h4>
  Each Pro+ only icon pack is considered "small batch" and does not have parity with categories or icons in our larger Packs. Instead they contain a curated selection of the 200 most common icons needed for app and website design.

## Add Icons

To add icons from a sprite file, follow these steps:

1. Grab the sprite file for the style or styles you want to use.
2. Place this file with the rest of your static files, like CSS or images, in your project.
3. In the `body` of your document, call the individual icon by name in the sprite file for the style you want to use. Make sure the path correctly points to where you placed the sprite files, and they are [hosted on the same server](#issues-with-svg-sprites)!

Optionally, you can add [accessibility](/web/dig-deeper/accessibility.md) hints via `aria` attributes to either hide the icon from assistive technology, or give it a proper human readable name.

Here's some examples of how you can call icons in a variety of styles:

```html
<header>
  <ul>
    <li>
      <!-- referencing a couple of solid style icons -->
      <svg>
        <use href="/your-path-to-fontawesome/sprites/solid.svg#saxophone-fire"></use>
      </svg>
    </li>
      <svg>
        <use href="/your-path-to-fontawesome/sprites/solid.svg#trumpet"></use>
      </svg>
    </li>
    <li>
      <!-- referencing a thin style icon -->
      <svg>
        <use href="/your-path-to-fontawesome/sprites/thin.svg#trumpet"></use>
      </svg>
    </li>
    <li>
      <!-- referencing a duotone solid style icon  -->
      <svg>
        <use href="/your-path-to-fontawesome/sprites/duotone.svg#sparkles"></use>
      </svg>
    </li>
    <li>
      <!-- referencing a sharp-duotone solid style icon  -->
      <svg>
        <use href="/your-path-to-fontawesome/sprites/sharp-duotone-solid.svg#cat"></use>
      </svg>
    </li>
    <li>
      <a href="https://github.com/FortAwesome/Font-Awesome">
        <!-- referencing a brands family icon  -->
        <svg>
          <use href="/your-path-to-fontawesome/sprites/fa-brands.svg#github"></use>
        </svg>
      </a>
    </li>
  </ul>
</header>
```

## Issues with SVG sprites

SVG sprites have a few tricky points you need to know about. Make sure your project is a good fit for using this technique with the following in mind.

### Same Origin Policy

If you use URLs in the `href`, they need to be loaded from the same domain. There is cross-origin protection on SVGs loaded this way. Some people just serve it directly from their static assets. You can also use a proxy.

### Visually Cropped Icons

Some icons may become visually cut off when using this method. This only occurs when all of the following are true:

- The [SVG Sprites](#select-the-sprite-files) files are used.
- An icon's height extends past the grid's height of our [Icon Canvas](/web/style/icon-canvas.md).

To avoid this issue, we recommend choosing one of the following:

#### Use the Full SVG Assets

The [Full SVG](#svg-formats) files include a viewbox contains the entire icon's path. If you must reference an SVG via the `<img>` element, use this format to avoid cropping portions of the icon that extend beyond the icon grid.

#### Use Inline Bare SVG Elements Instead

Instead of sprites, you can include bare SVGs inline via the `<svg>` element with custom styling that adds `overflow: visible;`. [Learn more and see an example in the Bare SVGs docs](/web/add-icons/svg-bare.md#use-inline-svg-elements-via-svg).