How to use SVG Sprite Builder
- Choose the static SVG icon files.
- Enter a prefix for the generated symbol identifiers.
- Download the sprite and use its reported symbol names.
Example: SVG Sprite Builder
Two icons named add.svg and close.svg with prefix icon.
You add
square.svg is a 10 by 10 viewBox with a rectangle. circle.svg is the same viewBox with a centered circle of radius 4. Files are ordered square then circle.
Symbol ID prefix: icon
You get
2 symbols built with unique internal IDs. Sample rows: square.svg | icon-1 | 2 | 2; circle.svg | icon-2 | 2 | 2.
Options
- File order and prefix
- The selected order assigns prefix-1, prefix-2 and later symbol IDs. Choose a prefix distinct from other sprite identifiers in the host document.
- Supported references
- Internal identifiers are rewritten with each symbol. Only the supported static geometry and local reference forms are accepted; remote content and active constructs are refused.
Supported inputs and limits
Up to 20 SVG files, 1 MiB total and 256 KiB each. Static geometry, selected definitions, gradients and internal references only. Scripts, style blocks, external links, foreignObject, filters, entities and unsafe or cyclic references are refused. No live rendering of input SVG or full SVG feature support. Each input is capped at 2,000 static elements, 32 nesting levels, 500 IDs and a conservative 10,000-element reference expansion budget. Output is capped at 2 MiB. These limits do not certify rendering cost in another app.
Where your input is processed
This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.
A symbol still needs an accessible consumer
Use the exported symbol IDs in the intended document and check the reference path when the sprite is external. Add labels or text alternatives at the consuming icon when it conveys meaning; combining SVG files does not provide those labels automatically. Inspect representative icons after copying, especially gradients, clipping and local use references.
Questions about SVG Sprite Builder
Are original IDs retained?
Internal IDs are prefixed and references are rewritten to reduce collisions.
Can it combine animated SVG?
No. The supported subset is static.
Are remote image resources fetched?
No. External references are refused.