SVG Sprite Packer
Combine multiple SVG icons into a single sprite — paste SVGs one at a time, name them, and get a hidden <svg> with <symbol> elements plus ready-to-use <use> snippets. Runs entirely in your browser.
Add an Icon
Icons (0)
No icons yet — paste SVG markup above and click Add Icon.
Full Example
Symbols can be reused any number of times and positioned with x / y attributes. Here, #icon-star is used five times for a rating row, then heart and bolt appear at a different size on a second row:
<!-- Sprite: paste once after <body> --> <svg xmlns="http://www.w3.org/2000/svg" style="display:none"> <symbol id="icon-star" viewBox="0 0 24 24">…</symbol> <symbol id="icon-heart" viewBox="0 0 24 24">…</symbol> <symbol id="icon-bolt" viewBox="0 0 24 24">…</symbol> </svg> <!-- Use symbols anywhere — repeat and position freely --> <svg xmlns="http://www.w3.org/2000/svg" width="160" height="60"> <!-- icon-star reused 5× for a rating row --> <use href="#icon-star" x="0" y="0" width="24" height="24"/> <use href="#icon-star" x="28" y="0" width="24" height="24"/> <use href="#icon-star" x="56" y="0" width="24" height="24"/> <use href="#icon-star" x="84" y="0" width="24" height="24"/> <use href="#icon-star" x="112" y="0" width="24" height="24"/> <!-- different icons on a second row, smaller --> <use href="#icon-heart" x="0" y="32" width="20" height="20"/> <use href="#icon-bolt" x="24" y="32" width="20" height="20"/> </svg>
Output
What is an SVG sprite?
An SVG sprite is a single hidden <svg> element that holds multiple icons as <symbol> elements. Each symbol is referenced elsewhere in the page with a lightweight <svg><use href="#id"/></svg> tag. All your icons share one DOM block — no repeated markup, and you can resize or recolor each instance independently with CSS.
Sprite vs data URIs
Data URIs (from the SVG to Data URI tool) embed each icon at its use site — great for one-off icons in CSS. Sprites are better when the same icon appears many times, or when you want a single authoritative definition for all your icons. Editing a symbol in the sprite updates every instance on the page at once.
Frequently Asked Questions
Where should I place the sprite in my HTML?+
Place it immediately after the opening <body> tag. Symbols must be defined before any <use> elements that reference them — putting the sprite first guarantees that ordering in all browsers.
Can I use currentColor for dynamic theming?+
Yes — unlike data URIs, inline SVG sprites inherit CSS from the document. Set fill="currentColor" in your icon SVGs, then control the color with CSS color on the <svg><use> element. This is the standard pattern for icon systems and works with Tailwind's text-* utilities.
Does this work with React or Vue?+
Yes. In React, paste the sprite into public/index.html or render it as JSX in your root layout. In Vue, place it at the top of App.vue's template. The <use href="#icon-id"> attribute is unchanged — neither framework transforms it.
Is my SVG sent to a server?+
No. All processing happens in your browser using the DOM parser and serializer. Your SVG markup never leaves your device.
Related Tools
How to use
- Paste an SVG icon into the input, give it a name, and click Add Icon. Repeat for each icon.
- The Sprite SVG updates automatically — copy it and paste it once, right after your opening
<body>tag. - Use the Usage snippets to reference each icon anywhere in your HTML with
<svg><use href="#icon-name"/></svg>. - Size icons with CSS
width/height, and usefill="currentColor"in your SVGs for CSS color control.