You're viewing docs for v5.15.4, an older version of Font Awesome.

Web

SVG Sprites

Want the wonderful goodness of SVG without having the need for our SVG + JS framework at the moment? Have no fear, SVG Sprites are here. We have lovingly prepped all the icon set styles into their own SVG sprites.

Advertisement

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>

Issues with SVG Sprites

Advertisement

SVG sprites have a few tricky points you need to know about.

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