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

Format	Folder	What’s the difference?	Impact on Rendering
Cropped	`/sprites`	SVG `viewbox` `width` and `height` are cropped to the edges of the interior symbol.	Icons will only take up as much space as their dimensions need.
Full	`/sprites-full`	SVG `viewbox` `width` and `height` are set to a standard square based on the Icon Canvas	Icons will be rendered at a consistent width with surrounding whitespace.

Classic

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

Duotone

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

Sharp

Style	Availability	Sprite
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

Style	Availability	Sprite
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

Style	Availability	Sprite	Preview
Brands	Free	`brands.svg`

Chisel

Style	Availability	Sprite	Preview
Regular	Pro+ only	`chisel-regular.svg`

Etch

Style	Availability	Sprite	Preview
Solid	Pro+ only	`etch-solid.svg`

Jelly

Style	Availability	Sprite
Regular	Pro+ only	`jelly-regular.svg`
Fill Regular	Pro+ only	`jelly-fill-regular.svg`
Duo Regular	Pro+ only	`jelly-duo-regular.svg`

Notdog

Style	Availability	Sprite	Preview
Solid	Pro+ only	`notdog-solid.svg`
Duo Solid	Pro+ only	`notdog-duo-solid.svg`

Slab

Style	Availability	Sprite	Preview
Regular	Pro+ only	`slab-regular.svg`
Press Regular	Pro+ only	`slab-press-regular.svg`

Thumbprint

Style	Availability	Sprite	Preview
Light	Pro+ only	`thumbprint-light.svg`

Whiteboard

Style	Availability	Sprite	Preview
Semibold	Pro+ only	`whiteboard-semibold.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 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.