Reusable SVG icons in HTML

Define the shape once, then reference it wherever the icon appears.

<svg aria-hidden="true" width="0" height="0">
  <symbol id="icon-star" viewBox="0 0 24 24">
    <path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/>
  </symbol>
</svg>

<button type="button">
  <svg class="icon" width="16" height="16" aria-hidden="true">
    <use href="#icon-star"/>
  </svg>
  Favorite
</button>

How it works

1. A zero-sized <svg> of <symbol> elements is the sprite sheet.
2. <use href="#id"> stamps one out; the fill is inherited from CSS.
3. An icon with meaning needs a title; a decorative one is hidden.

The run, in numbers

Lines

12

Characters to type

305

Tokens

73

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 58 seconds.

Type this snippet

Step 7 of 9 in Media & embeds, step 14 of 23 in Semantics & metadata.

← Previous Next →