Upgrade to v7 SVGs + SVG Sprites

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

Upgrading your SVGs or SVG Sprites to v7 can be as simple as swapping out the v6 files and replacing them with the v7 files, but there are a few things to know before you jump in.

Now with v7, there are now two options for using SVGs, whether as sprites or as bare SVGs:

Format	What’s the difference?	Impact on Rendering
SVG	SVG viewbox width is cropped to the edges of the interior symbol. The viewbox has a standard height based on the Icon Canvas.	Icons will only take up as much space as their dimensions need.
Full SVG	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.

When you upgrade your SVG Sprites or bare SVGs, you’ll get to choose which format you prefer. If you choose to switch over to the “full” format when you upgrade to v7, you may need to adjust the sizing of your icon to account for the whitespace, and remove any custom styling you may have added to align or pad icons depending on their shape.

Upgrading SVG Sprites

Due to issues with some SVG sprite-based icons becoming visually cropped, we strongly recommend switching over to use “full” sprites when upgrading to v7.

Follow these steps to update from v6 sprites to v7’s full sprites:

1. Swapping out the v6 sprite file for any styles you’re using, and replacing it with the v7 sprite file for that style.
2. Checking whether your icons need to be resized to account for the additional whitespace.
3. Adjusting any custom styling you may have added to align or pad icons depending on their shape.

Here’s an example of upgrading a couple “full” sprite icons to v7 in the Sharp Solid and a Sharp Thin styles:

<ul>
  <li>
    <!-- upgrading a Sharp Solid style icon to a full sprite -->
    <svg>
      <use href="/your_path_to_version_7_files/sprites-full/sharp-solid.svg#saxophone-fire"></use>
    </svg>
  </li>
  <li>
    <!-- upgrading a Sharp Thin style icon to a full sprite -->
    <svg>
      <use href="/your_path_to_version_7_files/sprites-full/sharp-thin.svg#trumpet"></use>
    </svg>
  </li>
</ul>

Check Any Changed Names

In v7, we changed the name of a few icons so you’ll need to check if the name changed for any icons you’re using. If so, you’ll need to update that name in your code. Here’s an example of what that change might look like:

v6 Usage	v7 Usage
<use href="solid.svg#vector-square"></use>	<use href="solid.svg#draw-square"></use>

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

Upgrading Bare SVGs

There are two options for upgrading any icons rendered via bare SVG code in your project:

Swap Out the v6 Code for v7 Code

Copy the SVG code from the v7 downloadsvgs files and replace each v6 icon’s bare SVG code with the new code.

Heads up! When using the non-”full” bare SVGs, some SVG-based icons may become visually cropped. You can add the custom overflow: visible; CSS to resolve this.

Switch to “Full” Bare SVGs

Copy the SVG code from the v7 download svgs-full files and replace each v6 icon’s bare SVG code with the new code.

Be sure to check whether your icons need to be resized to account for the additional whitespace and adjust any custom styling you may have added to align or pad icons depending on their shape.

Here’s an example updating an individual icon’s SVG code in a project:

This icon is updated. It’s somewhere.

<div class="time-to-get-ill">
  <style>
    .icon {
      width: 1.5em;
      height: 1.5em;
      display: inline-block;
      vertical-align: -.125em;
    }
  </style>
    <p><strong>This icon is updated. It's
    <svg class="icon" viewBox="0 0 640 640"><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM344 184L344 312.7L404 402.7C411.4 413.7 408.4 428.6 397.3 436C386.2 443.4 371.4 440.4 364 429.3L300 333.3C297.4 329.4 296 324.7 296 320L296 184C296 170.7 306.7 160 320 160C333.3 160 344 170.7 344 184z"/></svg>
    somewhere.
    </strong></p>
</div>