SVG Sprites

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.

Select the Sprite Files

Inside the Free, Pro, or Pro+ Font Awesome Download or package you've got, you'll find the files you need in a couple of different sets of assets.

Classic

Duotone

Sharp

Sharp Duotone

Brands

Chisel

Etch

Graphite

Jelly

Mosaic

Notdog

Pixel

Slab

Thumbprint

Utility

Vellum

Whiteboard

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!

Optionally, you can add accessibility 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:

<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 files are used.
• An icon's height extends past the grid's height of our Icon Canvas.

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

Use the Full SVG Assets

The Full SVG 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.