Symbol Use Icon Row

A check-mark symbol lives in defs. Three use elements place that symbol at different x positions to form an icon row.

Program

A symbol is reusable graphics with its own viewBox. The use element draws an instance of a symbol at a specified position.

symbol_use_icon_row.html

<svg class="demo-svg" viewBox="0 0 360 220" role="img" aria-label="Symbol and use">
  <defs>
    <symbol id="check" viewBox="0 0 20 20">
      <circle cx="10" cy="10" r="9" fill="#16a34a" />
      <path d="M6 10 l3 3 l5 -6" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
    </symbol>
  </defs>
  <rect width="360" height="220" fill="#f8fafc" />
  <use href="#check" x="60" y="80" width="60" height="60" />
  <use href="#check" x="150" y="80" width="60" height="60" />
  <use href="#check" x="240" y="80" width="60" height="60" />
</svg>

symbol A symbol is reusable graphics with its own viewBox.

use A use element draws an instance of a referenced symbol or shape at a position.