A navigation bar with the same search icon repeated three times, a dashboard reusing the same arrow ten times over: rather than redrawing the outline every time, <use> replays an element already defined elsewhere in the document, like a living copy-paste.
It is the missing piece that makes <symbol> useful: a symbol never renders on its own, it is <use> that actually triggers its rendering, as many times as needed.
Definition
<use> inserts a copy of an element already defined elsewhere in the document, most often a <symbol>, but also a plain shape or a group, referenced through its href attribute. Each call creates an independent instance, one that can be positioned and resized without touching the original definition.
Main attributes
| Attribute | Role |
|---|---|
href | References the id of the element to reuse, for example #icon |
x, y | Position of the displayed copy |
width, height | Size of the copy, effective only if the target has a viewBox |
width and height only actually resize a <symbol> if it defines a viewBox: without one, the browser simply ignores both attributes. This trips up a lot of newcomers: the resizing looks like it does nothing, when in fact it is only the missing viewBox blocking the expected effect.
Concrete rendering example
A heart icon defined once, reused three times at different colours and sizes: the foundation of the SVG sprite technique.
<svg viewBox="0 0 260 90" xmlns="http://www.w3.org/2000/svg">
<symbol id="heart" viewBox="0 0 24 24">
<path
d="M12 21 C12 21 3 14.5 3 8.5 C3 5 5.5 3 8.5 3 C10.5 3 12 4.5 12 4.5 C12 4.5 13.5 3 15.5 3 C18.5 3 21 5 21 8.5 C21 14.5 12 21 12 21 Z"
fill="currentColor"
/>
</symbol>
<use href="#heart" x="10" y="10" width="30" height="30" color="#ef4444" />
<use href="#heart" x="100" y="20" width="20" height="20" color="#f472b6" />
<use href="#heart" x="180" y="30" width="14" height="14" color="#c084fc" />
</svg>Each <use> calls the same symbol but sets its own size and colour through color, combined with fill="currentColor" inside the symbol: that is the mechanism behind endlessly reusable, monochrome icons.
Difference with copying and pasting the SVG
Duplicating an icon's code by hand means multiplying <path> lines across the file, with all the extra weight and copy-paste errors that brings. <use> copies nothing: it references, which means a change to the original <symbol> instantly ripples through every displayed copy, with no need to touch each instance one by one. That saving also shows up in maintenance: fixing a badly proportioned icon takes a single edit, automatically reflected on every button, menu and badge that reuses it.
Classic trap: some browsers block, for security reasons, an href pointing to an external SVG file hosted on a different domain. The sprite then works locally but stays invisible once the site goes live, unless the symbol is hosted on the same page or the same domain.
Real-world use case
This is the foundation of the SVG sprite technique for interface icons: a single file gathers every <symbol>, and every button, every menu item calls the right icon with a plain <use>, never duplicating the outline.
<use> also shows up in animated weather icons, sets of progress badges or maps with repeated markers: anywhere the same drawing needs to appear several times, at different positions or colours, without bloating the file.
Frequently asked questions
use reference an element that is not a symbol?Yes, use can reference any element carrying an id, a <rect>, a <path> or even a whole group. A symbol is still preferred though, since it isolates its own coordinate system.
use be styled differently from the original?Yes, to some extent: properties not explicitly set on the original, such as fill when the symbol uses currentColor, can be overridden on each use. Properties already fixed in the original definition stay dominant, though.
id referenced by href does not exist?Nothing shows up, with no visible error on the page. It is a common silent failure, usually caused by a typo in the id or by a symbol placed after the use that tries to call it.