SVGs + SVG Sprites

Are you currently using SVG sprites or SVGs and are ready to move to Version 6? This is what you need to do.

Upgrading SVG Sprites

Check your icons and if their name changed. If it has, you’ll want to update the name in your instance. The following table gives you an example of how it would work.

Version 5 Usage	Version 6 Usage
<use xlink:href="fa-solid.svg#ad"></use>	<use xlink:href="fa-solid.svg#rectangle-ad"></use>

Currently there is no easy upgrade option for SVG sprites. Each usage where an icon name is changed will need to be updated.

Upgrading Bare SVGs

In order to use Version 6 bare SVGs you’ll need to copy the SVG code from the Version 6 download files and replace your Version 5 code with the new code.

This icon is updated. It’s somewhere.

<div class="time-to-get-ill">
  <style>
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -.125em;
    }
  </style>
    This icon is updated. It's
    <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512">
      <path d="M272 251.2L333.3 343.1C338.2 350.5 336.2 360.4 328.9 365.3C321.5 370.2 311.6 368.2 306.7 360.9L242.7 264.9C240.9 262.2 240 259.2 240 255.1V111.1C240 103.2 247.2 95.1 256 95.1C264.8 95.1 272 103.2 272 111.1L272 251.2zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z"/>
    </svg>
    somewhere.
</div>