Combine multiple SVG icons into a single sprite file with symbol IDs for efficient web usage.
Every icon on a page costs a request, and twenty icons cost twenty round trips. This tool collapses that: you paste or upload the SVG files for your icons and it returns one sprite - a single SVG document whose icons live in <symbol> elements, each addressable by id. The combining happens entirely in the browser; your icons never leave the machine. The page loads the sprite once, and every icon is a <use> away. The surprise is on the other end: a sprite file referenced across origins, or straight off your hard drive, renders blank, because <use> cannot reach outside the page's own origin. Inline the sprite instead.
A concrete input and expected output from the current implementation.
Input
Two SVG files: triangle.svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l10 18H2z"/></svg> circle.svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg>
Expected output
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="triangle" viewBox="0 0 24 24">
<path d="M12 2l10 18H2z"/>
</symbol>
<symbol id="circle" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="8"/>
</symbol>
</svg> Each input file becomes one <symbol>: the id follows the source file name, the usual convention for sprite builders, and the viewBox is lifted onto the symbol so the icon scales to the size of the element that references it. The page then shows an icon with <svg><use href="#triangle"/></svg>.
Each source SVG is parsed and reduced to its drawing: the viewBox moves onto a new <symbol> element, and the inner paths, shapes, and groups are copied in unchanged. A unique id is assigned to each symbol, usually from the source file's name. The symbols are then concatenated inside one <svg> root with the SVG namespace, so the result is a single valid, standalone file.
On the page, the sprite document is embedded once - inlined into the HTML or loaded as a same-origin file - and hidden, since its symbols are not meant to be seen directly. An icon is placed wherever needed with <svg><use href="#id"/></svg>. The symbol's viewBox scales the drawing to the element's size, and fills written as currentColor inherit from the surrounding page, so one sprite serves every color variant.
Almost always the same-origin rule for <use>. A sprite loaded as an external file must come from the page's own origin; a page opened from disk has no origin to match, and browsers treat the reference as cross-origin, so every <use> resolves to nothing. Inline the sprite into the HTML, or serve the page and sprite from the same domain, and the icons appear.
Usually yes, with one condition. If the icon's drawing uses fill="currentColor" or no fill at all, CSS on the referencing element - color, fill, or a class - recolors it, which is how one sprite serves hover states and themes. A hardcoded fill attribute still loses to your CSS; only an inline style="fill:..." inside the icon wins permanently, so strip those from source files before building the sprite.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.