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 Font Awesome Download or package, you’ll find the files you need. Font Awesome Pro includes the following families: Classic, Brands, Sharp, Duotone, and Sharp Duotone. The Free version includes a selection of icons in Solid and Regular, as well as all Brand icons.

Classic Family

Style	Availability	Sprite file
Solid	Free or Pro	`solid.svg`
Regular	Free or Pro	`regular.svg`
Light	Pro only	`light.svg`
Thin	Pro only	`thin.svg`

Duotone Family

Style	Availability	Sprite file
Solid	Pro only	`duotone.svg`
Regular	Pro only	`duotone-regular.svg`
Light	Pro only	`duotone-light.svg`
Thin	Pro only	`duotone-thin.svg`

Sharp Family

Style	Availability	Sprite file
Solid	Pro only	`sharp-solid.svg`
Regular	Pro only	`sharp-regular.svg`
Light	Pro only	`sharp-light.svg`
Thin	Pro only	`sharp-thin.svg`

Sharp Duotone Family

Style	Availability	Sprite file
Solid	Pro only	`sharp-duotone-solid.svg`
Regular	Pro only	`sharp-duotone-regular.svg`
Light	Pro only	`sharp-duotone-light.svg`
Thin	Pro only	`sharp-duotone-thin.svg`

Brands Family

Style	Availability	Sprite file	Looks like
Brands	Free	`brands.svg`

Add Icons

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

Grab the sprite file for the style or styles you want to use.
Place this file with the rest of your static files, like CSS or images, in your project.
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 solid style icon -->
      <svg>
        <use href="/your-path-to-fontawesome/sprites/solid.svg#saxophone-fire"></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 family's solid style icon  -->
      <svg>
        <use href="/your-path-to-fontawesome/sprites/duotone.svg#sparkles"></use>
      </svg>
    </li>
    <li>
      <!-- referencing a duotone family's thin style icon  -->
      <svg>
        <use xlink:href="/your-path-to-fontawesome/sprites/duotone-thin.svg#flute"></use>
      </svg>
    </li>
    <li>
      <!-- referencing a sharp family's solid style icon  -->
      <svg>
        <use href="/your-path-to-fontawesome/sprites/sharp-solid.svg#piano-keyboard"></use>
      </svg>
    </li>
    <li>
      <!-- referencing a sharp family's regular style icon  -->
      <svg>
        <use href="/your-path-to-fontawesome/sprites/sharp-regular.svg#cowbell-circle-plus"></use>
      </svg>
    </li>
    <li>
      <!-- referencing a sharp-duotone family's solid style icon  -->
      <svg>
        <use href="/your-path-to-fontawesome/sprites/sharp-duotone-solid.svg#cat"></use>
      </svg>
    </li>
    <li>
      <a href="https://facebook.com/fontawesome">
        <!-- referencing a brands family icon  -->
        <svg>
          <use href="/your-path-to-fontawesome/sprites/fa-brands.svg#facebook"></use>
        </svg>
      </a>
    </li>
    <li>
      <a href="https://twitter.com/fontawesome">
        <!-- referencing a brands family icon  -->
        <svg>
          <use href="/your-path-to-fontawesome/sprites/fa-brands.svg#x-twitter"></use>
        </svg>
      </a>
    </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.