Looking to use SVG Sprites alongside Font Awesome? We make it easy. No need to load JavaScript code at runtime, and SVG Sprites work great across modern browsers.

Advertisement

We’ll cover the basic 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:

Basic Use

  1. Grab one of the sprite files.
  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 you want to use.
<header>
  <ul>
    <li>
      <a href="https://facebook.com/fontawesome">
        <svg>
          <use xlink:href="fa-brands.svg#facebook"></use>
        </svg>
      </a>
    </li>
    <li>
      <a href="https://twitter.com/fontawesome">
        <svg>
          <use xlink:href="fa-brands.svg#twitter"></use>
        </svg>
      </a>
    </li>
    <li>
      <a href="https://github.com/FortAwesome/Font-Awesome">
        <svg>
          <use xlink:href="fa-brands.svg#github"></use>
        </svg>
      </a>
    </li>
  </ul>
</header>
Advertisement

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

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!