How to Use SVG <use> Element  Reusing Symbols and Icons
The SVG <use> element lets you clone any defined shape or symbol  build efficient icon sprite systems with one file.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG <use> Element Basics
The `<use>` element instantiates a copy of any element referenced by id, including `<symbol>` definitions. It creates a shadow DOM instance that inherits the original's geometry but can have its own position and CSS overrides.
- Reference any element by id with href='#id'
- Position the clone with x and y attributes
- Override fill and stroke via CSS on the <use> element
Building an SVG Icon Sprite with <symbol> and <use>
Define each icon as a `<symbol>` with a viewBox in a single SVG file. Use `<use href='icon.svg#icon-name'>` in HTML to render any icon  one HTTP request, infinite reuse.
- Define icons as <symbol> with viewBox in one file
- Use <svg><use href='sprite.svg#icon-name'></svg> in HTML
- Override color with currentColor in the symbol paths
Frequently Asked Questions
Can I style an SVG <use> element with CSS?
You can style properties on the <use> element itself, but shadow DOM internals need CSS custom properties or currentColor to be styleable from outside.
What is the difference between <use> and <symbol>?
<symbol> defines a reusable template (not rendered directly); <use> instantiates and renders a copy of any referenced element or symbol.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG