How to combine svg icons into a sprite sheet online
- Step 1Clean and name your source icons first — The symbol ID is
prefix-<filename-without-extension>, so name files deliberately:cart.svg,search.svg,chevron-right.svg. Avoid spaces and uppercase if you want lowercase HTML-friendly IDs. Optionally run each icon through svg-pro-minifier so the combined sprite is as small as possible. - Step 2Drop all your SVG files onto the builder at once — The Sprite Builder is the one multi-file SVG tool — drag a whole selection onto the dashed drop zone, or click it and shift-select multiple
.svgfiles. The order you select them in is the order they appear in the sprite. There is no paste-source box here (paste is reserved for single-file tools); use real files. - Step 3Set the symbol-id prefix — The only option is the
Symbol id prefixtext field, defaulting toicon. With prefixiconand a filecart.svg, the symbol becomes<symbol id="icon-cart">. Pick a project-namespaced prefix likeuiorappif you plan to inline more than one sprite on the same page and want to avoid ID collisions. - Step 4Process and check the preview metric — Click
Process SVG. The result panel showsIcons combined: N. Note the SVG preview pane will look empty — the sprite carriesstyle="display:none"by design, so nothing renders until a<use>references a symbol. ExpandView SVG sourceto confirm each<symbol id="...">and itsviewBox. - Step 5Download sprite.svg and inline it — Download the file (always named
sprite.svg) and paste its contents once, high in your<body>. The browser keeps the hidden<svg>in the DOM; every<use href="#icon-cart">on the page then resolves against it without another network request. - Step 6Reference each symbol with the use element — Render an icon with
<svg width="24" height="24" aria-hidden="true"><use href="#icon-cart"/></svg>. Addwidth/heighton the outer<svg>to reserve layout space, andaria-hidden="true"for decorative icons. For meaningful icons, userole="img"+aria-labelon the outer<svg>— the builder does not inject<title>or ARIA for you.
What the Sprite Builder actually does to each icon
The complete transform applied per source file. Anything not listed here is NOT done — the builder is deliberately minimal.
| Step | Behaviour | Note |
|---|---|---|
| Read file | Each selected .svg is read as text in the browser | Order = file-selection order; no sort, no reorder UI |
| Derive symbol ID | id = "<prefix>-<filename-stem>" (e.g. icon-cart from cart.svg) | Stem = file name minus extension. Browser uses the file name; the API uses sequential <prefix>-1, <prefix>-2 |
| Copy viewBox | First viewBox="..." found in the source is copied onto the <symbol> | If a file has no viewBox, the symbol has none — it may not scale predictably |
| Strip wrapper | First <svg ...> open tag and the closing </svg> are removed; the inner markup becomes the symbol body | Only the FIRST <svg> tag is stripped — nested <svg> survives as content |
| Emit usage comment | Browser output appends <!-- <svg><use href="#id"/></svg> --> per symbol inside the sprite | Comment only — not a separate snippet file. The API output omits these comments |
| Wrap sprite | All symbols are wrapped in one <svg xmlns=... style="display:none"> | Single inline file sprite.svg; no external-file variant is generated |
Symbol ID examples (browser tool)
How the prefix box plus your file names produce IDs. Same prefix; different files.
| Source file | Prefix | Resulting symbol ID | Reference |
|---|---|---|---|
| cart.svg | icon | icon-cart | <use href="#icon-cart"/> |
| chevron-right.svg | icon | icon-chevron-right | <use href="#icon-chevron-right"/> |
| User Avatar.svg | ui | ui-User Avatar | Space in ID — quote it or rename the file first |
| logo.svg | brand | brand-logo | <use href="#brand-logo"/> |
| cart.svg + cart.svg | icon | icon-cart ×2 (collision) | Duplicate file names produce duplicate IDs — only the first resolves |
Cookbook
Real combine workflows with the exact output you get. IDs shown are the browser tool's filename-based scheme.
Combine three nav icons into one sprite
The canonical case: a handful of named icons become a hidden inline sprite you paste once. Note the display:none wrapper and the per-symbol usage comments the browser tool adds.
Inputs (selected together): cart.svg, search.svg, menu.svg
Prefix: icon
Output sprite.svg:
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="icon-cart" viewBox="0 0 24 24">
<path d="M7 18c-1.1 0-2 .9-2 2..."/>
</symbol>
<symbol id="icon-search" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27..."/>
</symbol>
<symbol id="icon-menu" viewBox="0 0 24 24">
<path d="M3 18h18v-2H3v2z..."/>
</symbol>
<!-- <svg><use href="#icon-cart"/></svg> -->
<!-- <svg><use href="#icon-search"/></svg> -->
<!-- <svg><use href="#icon-menu"/></svg> -->
</svg>Use a symbol in your HTML
After pasting the sprite once near the top of <body>, every icon is a tiny <use>. Set explicit width/height to reserve space, and aria-hidden for decoration.
<!-- once, high in <body> -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none"> … </svg>
<!-- anywhere, repeated freely -->
<button>
<svg width="24" height="24" aria-hidden="true">
<use href="#icon-cart"/>
</svg>
<span>Cart</span>
</button>Namespace two sprites on the same page
If a page inlines both a UI sprite and a brand sprite, a shared prefix risks ID clashes. Build each with a distinct prefix so IDs never collide.
Build 1: ui-icons → prefix "ui" → ids: ui-cart, ui-search Build 2: brand-icons → prefix "brand" → ids: brand-logo, brand-wordmark Reference: <use href="#ui-cart"/> <use href="#brand-logo"/>
Minify-then-combine for the smallest sprite
The builder copies inner markup verbatim — it does not minify. Run each icon through the minifier first so the combined output is lean.
Step 1: each icon → svg-pro-minifier (strips metadata, collapses whitespace) Step 2: minified icons → svg-sprite-builder (prefix "icon") Result: same symbol structure, ~30-60% smaller per <symbol> body (exact savings depend on the source — gzip on the wire compresses further)
Add a manual title for an accessible standalone icon
The builder does not inject <title> into symbols. For a meaningful icon, add accessibility at the use site (the simplest, most reliable approach).
<!-- icon conveys meaning (e.g. a status), not decorative --> <svg width="20" height="20" role="img" aria-label="Verified"> <use href="#icon-check-circle"/> </svg> <!-- vs purely decorative (label lives on the text next to it) --> <svg width="20" height="20" aria-hidden="true"> <use href="#icon-chevron-right"/> </svg>
Edge cases and what actually happens
The output preview pane looks empty
By designThe sprite is wrapped in <svg style="display:none">, so the preview renders nothing visible — that is correct. A sprite is a container of <symbol> definitions, not a drawn image. Expand View SVG source to confirm the symbols exist, and verify by adding a <use href="#id"> somewhere on a test page.
Two files share the same name
CollisionIDs are prefix-<filename>, so selecting cart.svg from two folders produces two <symbol id="icon-cart">. Duplicate IDs are invalid — browsers resolve <use href="#icon-cart"> to the first match and silently ignore the rest. Rename one file before combining (e.g. cart-outline.svg).
A source file has no viewBox
Missing viewBoxThe builder only copies a viewBox if the source has one. A <symbol> without a viewBox won't establish its own coordinate system, so the icon may render at the wrong size or clip. Fix the source first with svg-viewbox-fixer, then combine.
Nested <svg> inside an icon
Partial stripThe wrapper strip removes only the FIRST <svg ...> open tag and the closing </svg>. An icon containing a nested inner <svg> keeps that inner element as symbol content — usually harmless but occasionally surprising. Flatten nested SVGs before combining if rendering looks off.
Two icons define the same internal id (e.g. a gradient)
ID clashThe builder does NOT namespace internal ids on <defs>, gradients, clipPaths, or filters. If two icons both define id="a" for a gradient, the document has duplicate IDs and the second icon may reference the first's gradient. Rename internal IDs per-icon before combining (a build step or manual edit), as the tool won't do it for you.
File exceeds the per-job size limit
413-style rejectEach file is checked against the tier ceiling (free 5 MB, Pro 50 MB, Developer 2 GB per file) before processing. An oversized file throws File "name.svg" exceeds the <tier> tier per-job limit and the run stops. Icons are rarely this big — an oversized SVG usually has embedded raster data; strip it with svg-metadata-scrubber first.
Expecting a separate external sprite file or HTML snippet file
Not generatedThe tool emits exactly one artifact: an inline sprite.svg with display:none. There is no second 'external' build and no standalone usage-snippet download — the usage examples are HTML comments inside the sprite. To serve the sprite as an external file, host the same sprite.svg and reference <use href="/sprite.svg#id"> (note the external-reference CORS caveats).
Looking for a per-symbol rename grid
Not availableThere is no list of icons with editable ID fields and no drag-to-reorder. The only control is the Symbol id prefix text box; IDs come from file names and order from selection order. To change an ID, rename the source file; to change order, re-select the files in the order you want.
Pasting SVG source instead of uploading files
Not supported hereThe paste-source textarea only appears for single-file tools. Sprite Builder is multi-file, so it accepts files only. Save your markup as .svg files and drop them in. (The API accepts a primary input plus an additionalSvgs array, but the web UI is file-based.)
Uppercase or spaced file names
Literal IDThe stem is used verbatim, so User Avatar.svg yields id="ui-User Avatar" (with a space and capitals). Spaces in IDs are legal but awkward to reference. Rename to user-avatar.svg for clean, lowercase, hyphenated IDs that match common conventions.
Frequently asked questions
How are the symbol IDs generated?
In the web tool, each ID is <prefix>-<filename-without-extension>. So cart.svg with the default prefix icon becomes <symbol id="icon-cart">. The prefix is the single text option (default icon). Note the API/runner path numbers symbols sequentially instead — icon-1, icon-2 — because it receives raw SVG strings rather than file names.
Can I rename individual symbols in the tool?
Not in a grid. There is no per-icon rename field and no drag-reorder. To control an ID, name the source file accordingly before uploading; to control order, select files in the order you want them. The only in-tool control is the shared Symbol id prefix.
Is there a patch endpoint to update one icon without rebuilding?
No. The tool produces a single sprite from the files you give it in one pass — there is no incremental/patch API. To change one icon, re-run the builder with the updated file set. The sprite is plain text, so a CI step can also string-replace a single <symbol> block if you script it yourself.
Does it generate the HTML usage snippet for me?
The browser output embeds a commented usage line per symbol, e.g. <!-- <svg><use href="#icon-cart"/></svg> -->, inside the sprite. That is a copy-paste hint, not a separate snippet file, and the API output omits it. You still write the real <use> markup yourself, adding width/height and any ARIA.
Does it preserve colors, gradients, and filters?
It copies each icon's inner markup verbatim, so fills, strokes, gradients, and filter elements are carried over. The important caveat: internal ids (on gradients/clipPaths/filters) are NOT namespaced, so two icons using the same internal ID will collide. Rename those IDs per-icon before combining if your icons share generic IDs like a, b, grad1.
Should I inline the sprite or serve it as an external file?
The tool only produces the inline form (<svg style="display:none"> named sprite.svg). Inlining once near the top of <body> avoids a request and lets same-document CSS reach currentColor icons. You can also host the file and use <use href="/sprite.svg#id">, but external references add a fetch and same-origin/CORS constraints — see the browser-usage reference guide.
How many icons can I combine at once?
Batch size follows your tier: free is effectively single-file oriented, Pro allows up to 20 files at 50 MB each, Developer is unlimited at up to 2 GB per file. Most icon sets are tiny, so the practical limit is browser memory, not the count. For very large sets, minify first.
Why does my icon not appear when I use it?
Most often the <use> href ID doesn't match the generated symbol ID (check capitalisation and the exact file-name stem), the outer <svg> has no width/height so the icon collapses to 0×0, or the symbol had no viewBox so it isn't scaling. Open View SVG source, copy the real id, and set explicit dimensions on the outer <svg>.
Do SVG sprites work in all browsers?
The <use href="#id"> pattern works in all current browsers (Chrome, Firefox, Edge, Safari). The legacy xlink:href attribute is deprecated and unnecessary in 2026; plain href is correct. Internet Explorer never supported external sprite references and is effectively zero usage today.
Does the builder add accessibility markup?
No. It does not inject <title> into symbols or set ARIA attributes. Add accessibility at the use site: aria-hidden="true" for decorative icons, or role="img" + aria-label on the outer <svg> for meaningful ones. This is intentional — labels belong to context, not to the shared symbol definition.
Is my icon source uploaded anywhere?
No. The build runs in your browser via the same in-process engine used elsewhere; the result panel shows a 0 bytes uploaded badge. The public /run API never accepts uploads at all — it returns runner-pairing instructions, and the actual transform executes on your own machine through a paired @jadapps/runner.
Can I run this in a build pipeline?
Yes, via the runner. GET /api/v1/tools/svg-sprite-builder returns the option schema (spritePrefix, plus additionalSvgs for extra sources); pair @jadapps/runner once and POST to http://127.0.0.1:9789/v1/tools/svg-sprite-builder/run. The runner path numbers symbols icon-1, icon-2 rather than by file name, so plan your <use> references accordingly. See the automation guide for a full Vite/Webpack setup.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.