Define the graphic once in an SVG <symbol>, then reference its ID with <use> inside each visible SVG. Give each instance its own size, and let CSS arrange the surrounding page. SVG document structure.

This tutorial is for someone editing an HTML page on a Mac who wants the same small graphic beside several text labels. The complete example uses synthetic tiles, ordinary HTML, and CSS. It needs no framework, JavaScript, downloaded artwork, or build step.

How does one symbol produce several visible graphics?

A <symbol> is a graphical template. It does not display on its own; a <use> reference creates a visible instance. Put the definition once in the document, then add a small SVG wrapper wherever the graphic belongs. MDN documents both elements as widely available. MDN: symbol.

The important distinction is between avoiding repeated authored paths and avoiding browser rendering work. Your HTML contains one path definition, but the browser still creates a rendered instance for each <use>. MDN describes this as cloning into a non-exposed DOM. Reuse makes the source easier to maintain; it does not mean that several visible graphics become one rendered object. MDN: use.

For a page with labels and icons, keep the labels in HTML and give each icon its own SVG wrapper. WHATWG recognizes SVG as embedded, phrasing, and flow content in HTML, which supports placing these wrappers among ordinary page content. HTML Standard: SVG.

Create a complete page with one definition and three instances

In a plain-text editor on your Mac, create a file named svg-reuse.html. Paste the complete document below, save it, and open it in your desktop browser. Keep the .html extension and save plain text rather than a rich-text document.

The example defines two diagonal tiles using a single <path>. Three references display that same geometry at different sizes and colors. Each reference uses href="#demo-tiles"; plain href is the current form, while xlink:href is deprecated. MDN: use attributes.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Reusable tile symbol</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      color: #263445;
    }
    .symbol-bank {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }
    .samples {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
    }
    .sample {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem;
      border: 1px solid #cbd5df;
    }
    .icon {
      display: block;
      width: 24px;
      height: 24px;
      flex: none;
    }
    .icon-large { width: 48px; height: 48px; }
    .icon-medium { width: 32px; height: 32px; }
    .blue { color: #2457a7; }
    .purple { color: #7140a0; }
  </style>
</head>
<body>
  <svg class="symbol-bank" width="0" height="0" aria-hidden="true">
    <symbol id="demo-tiles" viewBox="0 0 24 24"
            preserveAspectRatio="xMidYMid meet">
      <path fill="currentColor"
            d="M4 4H10V10H4Z M14 14H20V20H14Z"></path>
    </symbol>
  </svg>

  <main>
    <h1>Tile samples</h1>
    <div class="samples">
      <div class="sample">
        <svg class="icon" width="24" height="24"
             viewBox="0 0 24 24" aria-hidden="true">
          <use href="#demo-tiles" width="24" height="24"></use>
        </svg>
        <span>Small tiles</span>
      </div>

      <div class="sample blue">
        <svg class="icon icon-large" width="48" height="48"
             viewBox="0 0 24 24" aria-hidden="true">
          <use href="#demo-tiles" width="24" height="24"></use>
        </svg>
        <span>Large tiles</span>
      </div>

      <div class="sample purple">
        <svg class="icon icon-medium" width="32" height="32"
             viewBox="0 0 24 24" aria-hidden="true">
          <use href="#demo-tiles" width="24" height="24"></use>
        </svg>
        <span>Medium tiles</span>
      </div>
    </div>
  </main>
</body>
</html>

The expected result is three bordered samples containing the same diagonal tiles. The first uses the body text color, the second blue, and the third purple. Their SVG boxes measure 24, 48, and 32 CSS pixels square. Narrow the browser window to check how the samples wrap.

The visible shapes are decorative here because the adjacent labels supply the content. That is why the SVG wrappers use aria-hidden="true". This removes them from the accessibility tree without visually hiding them. Keep this treatment for decorative graphics; do not apply it to an image that carries information absent from the text. MDN: aria-hidden.

Which settings control page layout and SVG layout?

There are three separate jobs: arranging the HTML components, sizing each SVG box, and mapping the drawing into that box. Changing the setting for one job may leave the other two untouched.

Job Setting in the example What to change
Arrange samples on the page .samples uses flexbox and wrapping Change spacing or wrapping here
Align each graphic with its label .sample uses flexbox and align-items: center Change the component’s alignment here
Set the displayed SVG box .icon and its size classes Change CSS width and height here
Define drawing coordinates viewBox="0 0 24 24" Change this when the artwork’s coordinate bounds change
Size the referenced symbol internally <use> has width and height of 24 Keep these matched to this example’s internal coordinate area
Fit the drawing proportionally preserveAspectRatio="xMidYMid meet" Change this only when a different fitting behavior is intended

Flexbox arranges the direct children of a flex container. The outer container therefore arranges the samples, and each inner container arranges an SVG beside a label. Flexbox works along one dimension at a time; wrapped lines distribute their space independently. For a design requiring coordinated rows and columns, CSS Grid is the relevant page-layout alternative. MDN: Basic concepts of flexbox.

Inside SVG, <use> has a different layout model. Its x and y values offset graphics in the SVG coordinate system. They do not set the spacing between HTML components. Its width and height can size a referenced symbol’s viewport; they do not provide a general scaling control for a directly referenced path or group. W3C: Layout of re-used graphics.

Why does the large instance still use internal dimensions of 24?

The outer SVG’s viewBox describes a 24-by-24 coordinate area. Its CSS box can be 48-by-48 pixels while its internal coordinates remain unchanged. The <use> fills that internal 24-by-24 area, and the outer SVG maps it to the larger displayed box. MDN defines viewBox as four numbers: minimum x, minimum y, width, and height. MDN: viewBox.

For an illustrative calculation using this exact artwork, a 48-pixel box maps 24 coordinate units at a scale of 48 / 24 = 2. The tile geometry spans coordinates 4 through 20, so its overall painted extent becomes (20 - 4) × 2 = 32 pixels. The remaining space comes from the intentional margins inside the drawing.

This explains why increasing an icon’s CSS width does not necessarily make its painted shape fill that entire width. Check the geometry’s bounds within the viewBox before adjusting page margins to compensate.

What happens in a rectangular SVG box?

With xMidYMid meet, the drawing scales uniformly, stays centered, and fits the entire viewBox inside the available viewport. A square drawing in a wide rectangle therefore leaves space at the sides. none permits distortion; slice preserves proportions but lets part of the viewBox extend beyond the viewport. Use meet when the complete graphic should remain visible. MDN: preserveAspectRatio.

How can each instance have its own color?

The path uses fill="currentColor". The keyword takes the element’s color value, allowing the same drawing to follow the surrounding text color. In the example, changing the .blue or .purple rule changes both the label and its tiles. MDN: currentColor keyword.

This works through inheritance into each instance. SVG’s reuse model gives the generated content styles inherited from the <use> host. A fixed color declared directly on the source path would take precedence over an inherited fill supplied by a parent. Keep the shared geometry free of fixed colors when per-instance coloring is required. W3C: Style Scoping and Inheritance.

Avoid depending on a selector such as .blue path to reach a generated path through the visible wrapper. The generated content belongs to the reuse shadow tree, so ancestor relationships differ from ordinary nested HTML. Set color on the wrapper or its container and retain currentColor in the source geometry. W3C: Style Scoping and Inheritance.

What should you check when a reused symbol looks wrong?

Work from the reference outward. This sequence separates a missing graphic from an incorrectly sized or positioned one, so each adjustment addresses a specific mechanism.

  1. Check the target. Confirm that href="#demo-tiles" matches the definition’s id="demo-tiles". Keep that ID unique in the document tree. W3C: The id attribute.
  2. Check the visible wrapper’s dimensions. Keep the zero-size .symbol-bank class on the definition container only. Each visible instance needs a nonzero box, as shown by .icon.
  3. Check the coordinate bounds. Confirm that the artwork belongs within the declared viewBox. Unexpected empty space can come from unused drawing coordinates. MDN: viewBox.
  4. Check the referenced element type. If you replaced the symbol with a direct path reference, changing <use> width and height will not scale it in the same way. Restore the symbol and its viewBox for this pattern. MDN: use.
  5. Check color declarations. Look for fixed source colors before adding more instance selectors.
  6. Check the page container. If the graphic renders correctly but sits too far from its label, adjust the component’s CSS gap or alignment. MDN: Basic concepts of flexbox.

When integrating the example into an existing page, insert the symbol bank once, merge the CSS, and copy only the visible SVG wrapper into additional components. The small document received structural checks for balanced elements, unique IDs, and three references resolving to one path definition; those checks do not establish browser rendering. Open the page in the Mac browsers you intend to support and inspect the resulting size, spacing, and color.

To change the shared drawing, edit its single path definition. To change one instance, edit its wrapper’s size or inherited color. Keeping those responsibilities separate gives you reusable artwork and predictable control over where each instance appears.

Sources