# SVG Symbols

Guide to adding Font Awesome icons as SVG symbols for reusable graphics.

> Looking to use the SVG + JS method to get your icon sprites to make repeated icons more performant on your page? We've got your back.

We'll cover the basics of when, and how, to use SVG Sprites to improve load time on sites that repeat the same icons.

Make sure you:

- Plan to use [the SVG+JS method of Font Awesome](/web/dig-deeper/webfont-vs-svg.md)
- Are using a lot of the same icon or icons on a single page
- Have your project [set up with Font Awesome](/web.md#web-setup)

You might be wondering how rendering icons with JavaScript affects performance. Well you're not the only one. We worried about this while we were developing it and even took some special measures to make sure [it was as fast as we could make
it](/web/dig-deeper/performance.md).

Our testing shows that for the typical number of icons most people use on a site, the loading and rendering time for [SVG+JS method is faster than Web Fonts](/web/dig-deeper/webfont-vs-svg.md).

## A Case for SVG Symbols

The case below is a great one for SVG Symbols – there are a bunch of the same icon repeated on the page, so you'll get a big performance boost by loading each of them only once using the step-by-step method below.

  <img
    slot="media"
    src="/web/add-icons/images/symbols-1.png"
    alt="An example page that shows a good case for using SVG Symbols"
  />
  <span class="wa-card-image-description">
    An example page that shows a good case for using SVG Symbols
  </span>

  <h4>
    Stop! Demo time!
  </h4>

See <a href="https://codepen.io/fontawesome/pen/YPPggwB">this working example on CodePen.io</a>.

We'll define these icons as symbols: pencil, trash, and star. We'll create names for the symbols using `data-fa-symbol`: edit, delete, and favorite.

To actually use the icons, we need to reference them in an `<svg>` tag by using `<use>` with an `href` attribute containing the name we gave the icon:

```html
<!-- Define the icon symbols, these are invisible on the page -->
<i data-fa-symbol="edit" class="fa-solid fa-pencil fa-fw" title="Edit"></i>
<i data-fa-symbol="delete" class="fa-solid fa-trash fa-fw" title="Delete"></i>
<i data-fa-symbol="favorite" class="fa-solid fa-star fa-fw" title="Favorite"></i>

<!-- Use the defined symbols -->
<svg><use href="#edit"></use></svg>
<svg><use href="#delete"></use></svg>
<svg><use href="#favorite"></use></svg>
```

  <h4>
    Make Your Icons Accessible
  </h4>
  When using icons without accompanying text, consider <a href="/web/dig-deeper/accessibility.md">adding an `aria-label`</a> to explain their purpose to assistive technology!

## Make Sure to Add Some CSS

One of the downsides to SVG sprites is that extra styling is necessary to make them behave. When using symbols you will need to handle this yourself.

```html
<!-- A quick, reasonable place to start with styling your symbols -->
<style>
  .icon {
    width: 1em;
    height: 1em;
  }
</style>

<!-- Name symbols with the value of data-fa-symbol -->
<i data-fa-symbol="picture-taker" class="fas fa-camera"></i>

<!-- Use the defined name -->
<svg class="icon"><use href="#picture-taker"></use></svg> Say Cheese!
```

---

## Related Topics