SVG icon sprite
Combine separate SVG icons into one reusable symbol sheet. Use SVG icon sprite locally with practical instructions, output settings and format limits.
SVG icon sprite
Combine self-contained SVG icons into one reusable symbol sprite with predictable names. Choose a prefix, arrange the source files and let the tool namespace internal IDs so definitions from different icons do not collide. The output is useful when integrating a small icon collection into a website or application.
- Bundle navigation icons into one sprite
- Avoid collisions between icon gradient IDs
- Create predictable symbol names for an icon set
How to use SVG icon sprite
Add the SVG icons
Upload the self-contained SVG files in the intended symbol order. Remove external resource dependencies so each icon can be represented within the combined sprite.
Choose a symbol prefix
Choose a prefix beginning with a letter and containing only letters, digits, underscores or hyphens. Symbols follow upload order with numbered names such as icon-1 and icon-2.
Build the combined sprite
Run Create output to create reusable SVG symbols. Internal IDs and references are namespaced separately for each icon to reduce collisions in the combined document.
Integrate and test symbols
Download the SVG sprite and reference its generated symbols in your website. Check icon sizing, colour behaviour and any gradients or clipping paths in the destination layout.
Understand the settings
- Symbol prefix
- Symbol prefix is applied to this tool job. Use the value or syntax described in the example below. The initial value is “icon”.
A navigation icon collection
Five navigation icons use overlapping internal gradient names. Upload them in menu order and choose nav as the prefix. The sprite provides nav-1 through nav-5 with isolated internal references; render each symbol in the navigation before replacing the individual files.
Check your result
Upload a supported file, adjust the settings and create the output. Symbols use prefix-1, prefix-2, and so on. Internal IDs and references are namespaced for each icon. Open the saved output in the app or workflow where you plan to use it. Check one representative result before repeating the same settings with more files. The original files stay unchanged.
What to know before you start
- Files are processed on this device. Browser memory and engine-specific limits apply. Save results before reloading.
- Symbols use prefix-1, prefix-2, and so on. Internal IDs and references are namespaced for each icon.
- Upload up to 20 files, at least 1 with a combined size of at most 100 MB. The completed output must fit within 200 MB.
- Files are checked by the local engine; a matching filename alone is not proof of valid contents.
- Selections and completed jobs stay available while you navigate inside this tab. Use My files to revisit results. Reloading or closing the tab clears the workspace; download results you want to keep first.
SVG icon sprite: common questions
How are symbol names chosen?
The prefix is followed by a hyphen and the one-based upload position, such as nav-1. Arrange sources consistently if application code relies on those names, since changing order changes which drawing belongs to each numbered symbol.
What happens to duplicate internal IDs?
Each icon’s internal IDs and their references are namespaced for that icon. This helps separate gradients, clipping paths and other definitions that would otherwise collide when multiple independently authored SVG files share the same ID names.
Can I use SVGs with linked assets?
Inputs must be self-contained SVGs, each with a viewBox or numeric width and height. Linked external artwork or active resources are unsupported, so simplify the icons before combining them into a reusable symbol sprite.
Does creating a sprite update my website?
The result is a downloadable SVG asset. You still need to add it to your project and reference the generated symbol IDs in your markup or components, then verify rendering in the layout where those icons are used.
Does SVG icon sprite upload files to another service?
Processing runs in this browser, on your device. Files and pasted input are not uploaded to a conversion server. The website and required engine assets must load first; large operations depend on available device memory.
Can I continue after changing pages?
Selections and completed jobs stay available while you navigate inside this tab. Use My files to revisit results. Reloading or closing the tab clears the workspace; download results you want to keep first.