Web

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.

Advertisement

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.

Before You Get Started

Make sure you’ve:

Select the Sprite Files

Inside the Font Awesome Download or package, you'll find the files you need. In Font Awesome Pro, there are three families of icons: Classic, Sharp, and Brands. There are five styles of Classic icons, with more Sharp styles coming soon. The Free version includes a selection of icons in Solid and Regular, as well as all Brand icons.

Classic Family

Style Availability Sprite file Looks like
Solid Free or Pro solid.svg
Regular Free or Pro regular.svg
Light Pro only light.svg
Thin Pro only thin.svg
Duotone Pro only duotone.svg

Sharp Family

Style Availability Sprite file Looks like
Solid Pro only sharp-solid.svg
Regular Pro only sharp-regular.svg
Light Pro only sharp-light.svg
Thin Pro only sharp-thin.svg
Duotone Coming Soon!

Brands Family

Style Availability Sprite file Looks like
Brands Free brands.svg

Add Icons

Advertisement

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!

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 xlink:href="/your-path-to-fontawesome/sprites/solid.svg#saxophone-fire"></use>
      </svg>
    </li>
    <li>
      <!-- referencing a thin style icon -->
      <svg>
        <use xlink:href="/your-path-to-fontawesome/sprites/thin.svg#trumpet"></use>
      </svg>
    </li>
    <li>
      <!-- referencing a sharp family's solid style icon  -->
      <svg>
        <use xlink: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 xlink:href="/your-path-to-fontawesome/sprites/sharp-regular.svg#cowbell-circle-plus"></use>
      </svg>
    </li>
    <li>
      <a href="https://facebook.com/fontawesome">
        <!-- referencing a brands family icon  -->
        <svg>
          <use xlink: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 xlink:href="/your-path-to-fontawesome/sprites/fa-brands.svg#twitter"></use>
        </svg>
      </a>
    </li>
    <li>
      <a href="https://github.com/FortAwesome/Font-Awesome">
        <!-- referencing a brands family icon  -->
        <svg>
          <use xlink:href="/your-path-to-fontawesome/sprites/fa-brands.svg#github"></use>
        </svg>
      </a>
    </li>
  </ul>
</header>

Font Awesome Sharp requires Pro and specific versions!

Make sure you have an active Pro-level plan or a Pro license with access to the specific versions that include Sharp's styles.

Issues with SVG sprites

Advertisement

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 xlink: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.

Internet Explorer doesn't load remote SVGs

If you use a URL in the xlink:href, IE will not automatically download the file for you. Check out this project (opens new window) if this is something you need.