SVG / Icons

SVG Sprite Generator: Symbols and Icon Usage

Drop multiple SVG icons to create a symbol sprite. Sanitise markup, deduplicate filename IDs, preserve viewBoxes, optionally convert fills to currentColor, and download sprite.svg.

SVG Sprite Generator: Symbols and Icon Usage: Drop in a set of SVG icons and get one sprite file with a symbol for each, plus the snippet to use each icon. Scripts, external resources and anything unsafe are removed, sizes become a viewBox where needed, and fills can be switched to currentColor so icons follow the text colour. Runs 100% locally in your browser with zero server file uploads.

Category
Developer tools
Runs
In your browser
Cost
Free · no sign-up
Availability
Ready to use
SVG icon spriteLocal processing

Runs entirely in your browser

Up to 60 icons · 1 MB each · selecting files replaces the current set

Scripts, event handlers, external resources, embedded images, text and unsupported elements are removed. Basic inline styles become presentation attributes. Missing viewBox uses numeric width and height, with 24 units as the fallback for each missing dimension. Check each preview before use.

Edit an SVG icon

Symbols and reuse

SVG 2 specifies symbol and use elements and their viewBox behaviour: https://www.w3.org/TR/SVG2/struct.html#SymbolElement ; https://www.w3.org/TR/SVG2/struct.html#UseElement

Local processing and paint

Each icon is rebuilt from a list of safe SVG elements and attributes, so scripts, event handlers and external resources cannot reach the sprite. No third-party icon set is included. SVG paint and currentColor are specified at https://www.w3.org/TR/SVG2/painting.html . Uploaded icon licences remain the user's responsibility.

How to use it

  1. Drop up to 60 SVG icons, each under 1 MB.
  2. Inspect sanitised previews and optionally convert fills to currentColor.
  3. Download the sprite and select an icon to copy its use snippet.

Privacy & limitations

Your SVG files stay local. The tool does not fetch embedded URLs or upload icons.

Related tools

SVG EditorSVG CleanerSVG to JSX

Frequently asked questions

How do I use the sprite?

Insert its SVG once in a hidden container on the page, then use the copied inline snippets. For a separate file, use sprite.svg#id as the href instead.

What happens when viewBox is missing?

Numeric width and height, including px units, define a new viewBox. Any missing or unsupported dimension defaults to 24 units. The preview flags repaired viewBoxes so you can check cropping.

Will every icon keep its exact appearance?

No. Basic shapes, groups, gradients, clipping and masks are retained, but scripts, text, embedded images, use elements and unsupported styling are removed. Check the preview. You remain responsible for the licences of uploaded artwork.

Free tool · runs in your browser · no account required