SVG Sprite Generator
Merge SVG icons into one sprite sheet of <symbol> definitions, with live previews and a ready-to-paste <use> snippet.
Drag & drop your SVG icons here, or click to browse
No uploads. Your files stay on your device.
Add at least one SVG icon to build your sprite sheet — or .
Sprite sheet
How to use it
How it works
Drop in a folder of .svg icons (or paste SVG code one icon at a time) and each
one is wrapped in a <symbol> with its own id and
viewBox, then merged into a single sprite sheet. One sprite means one request
instead of dozens, and every icon can be dropped into a page with
<use href="sprite.svg#icon-star">. Rename any icon and the IDs, the preview
and the usage snippet update instantly.
Everything runs locally: your files are read with the FileReader API, parsed with the
browser's own DOMParser and serialised back to SVG markup — nothing is uploaded,
so unreleased logos and icon sets never leave your device. Tick
Recolour with currentColor to swap hard-coded fill and
stroke colours for currentColor so icons inherit the text colour of
wherever you place them. Choose External file for a cacheable
sprite.svg, or Inline sprite for markup you paste once near the top of
the <body>.
Frequently asked questions
What is an SVG sprite and why use one?
An SVG sprite is a single SVG file that holds every icon as a <symbol> with its own id and viewBox. Instead of loading twenty separate icon files, the browser fetches and caches one, and each icon is placed with <svg><use href="sprite.svg#icon-star"></use></svg>. Because the icons stay real vector markup rather than a bitmap sheet, they scale perfectly on any screen and can be styled with CSS: set fill or color on the <svg> element and the icon follows.
How do I create an SVG sprite from my icon files?
Drag your .svg files onto the drop zone (or paste SVG code one icon at a time). Each file is wrapped in a <symbol> whose id comes from the file name (box.svg becomes #icon-box), and its viewBox is copied across so the icon keeps its proportions. Rename any icon in the list to change its id, adjust the ID prefix if "icon-" does not suit your project, then copy the sprite code or download sprite.svg. The usage snippet underneath gives you the exact <use> markup to paste into your page.
Should I use an external sprite.svg or an inline sprite?
An external sprite.svg is cached by the browser and shared across every page, which is the better choice for a site with many pages. Just note that <use> with an external file must be served from the same origin. An inline sprite is pasted once near the top of <body> with the symbols hidden, so the icons render with zero extra requests and work from a file:// page or inside an email preview. Switch between the two with the "Sprite type" selector and the sprite plus the usage snippet update instantly.