Français

<use>

Reusing a symbol without duplicating it

— 2 min read

  • HTML
  • accessibility
  • semantics
  • SVG

<use> + <defs> + <symbol> — SVG reuse

<defs> contains graphic definitions that are not rendered directly. <symbol> defines a reusable symbol with its own viewBox. <use> instantiates that symbol wherever needed, as many times as required.

When to use it

You want to use the same icon in multiple places without duplicating the SVG code. Define the icon once in <defs> via <symbol>, then place it with <use href="#id">. This is the lightest and most maintainable SVG icon system.

What you gain

Accessibility: each <use> can have its own <title> to contextualize the instance. The <symbol> can contain a default <title>, overridden by the one on the <use> instance.

Code example

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <defs>
    <symbol id="icon-star" viewBox="0 0 24 24">
      <title>Star</title>
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87
               1.18 6.88L12 17.77l-6.18 3.25L7 14.14
               2 9.27l6.91-1.01z" />
    </symbol>
  </defs>
</svg>
 
<!-- Reuse anywhere -->
<svg aria-hidden="true" width="24" height="24">
  <use href="#icon-star" />
</svg>
 
<svg role="img" aria-label="Favorite" width="24" height="24">
  <use href="#icon-star" />
</svg>

Further reading