SVG Symbol Sprite
Combine SVG Icons Into One Symbol Sprite
Combine a folder of SVG icons into one reusable sprite. Each file becomes a <symbol> with a ready-made <use> snippet, while prefixed internal IDs prevent gradients, masks, and clip paths from colliding.
These settings apply to the whole sprite.
Sprite preview
Add SVG files to build a sprite.
No files yet. Drop files above or click SELECT FILES.
Symbol sprite or spritesheet?
A symbol sprite is one SVG file holding a <symbol> per icon. Nothing is drawn until you reference a symbol with <use>, so the icons stay vectors, stay stylable from CSS, and stay sharp at any size. This is what you want for a user-interface icon set.
A spritesheet is one image with every icon laid out on a grid, drawn with background-position or with a JSON frame map. The icons are pixels at fixed coordinates, which is what game engines and canvas renderers expect, and what you need when the target cannot use <use> at all.
Open the SVG Spritesheet generatorWhen to use a symbol sprite
A symbol sprite keeps an icon set in one reusable SVG file, and every icon instance becomes a short <use> element instead of a repeated block of paths. This is useful for navigation, buttons, tables, and other interfaces that reuse the same icons. The symbols remain vector markup, so they stay sharp and can inherit color and sizing from CSS.
How to build an SVG symbol sprite online
- 1
Drop your SVG icons, or click SELECT FILES, to add them to the queue. Up to 40 at a time, and the list order is the symbol order.
- 2
Pick an external or an inline sprite, decide whether to optimize the icons and normalize their viewBoxes, and watch the icon grid rebuild from the sprite itself.
- 3
Click SAVE ALL to download sprite.svg, or a ZIP with sprite.svg and usage.html when usage examples are on.
Privacy: your files never leave your browser
Conversion runs locally in your browser using JavaScript and WebAssembly. There is no file upload or server-side conversion, so the files you add stay on your device.
Local processing helps protect confidential logos, internal documents, and unreleased client artwork. Pages and conversion code are cached as you use them, so tools you have already opened can continue working without a network connection.
Frequently asked questions
What happens when two files produce the same ID?
IDs come from the filename stem, lower-cased and slugified, so "Arrow Left.svg" becomes arrow-left. When two files produce the same ID, the first keeps it and the next ones get -2, -3, and so on. Renaming a file in the list changes its ID immediately, and so does sorting or dragging the list, because the first file in the order is the one that keeps the plain ID.
Should I use an external or an inline sprite?
An external sprite is a sprite.svg file you reference with <use href="sprite.svg#icon-id">. It is cached like any other asset and keeps your HTML small, at the cost of one extra request, and it has to come from the same origin unless CORS allows otherwise. An inline sprite is the same markup pasted into the page inside a hidden <svg> and referenced with <use href="#icon-id">. It needs no request and always resolves, but those bytes repeat in every HTML document that uses it.
Will building a sprite change how my icons look?
No. Each file's root <svg> becomes a <symbol> with the same viewBox and its children are carried over unchanged apart from ID prefixing. "Optimize SVG" runs the same safe pass set as the SVG Optimizer, so comments, editor metadata and redundant attributes go while geometry stays. "Normalize viewBox" re-centres each icon in a square coordinate box, which changes the box and not the drawing. <script> elements and on* attributes are always dropped, because a sprite ends up inlined in your page.