What happens to gradients and clipping?

Supported gradients, masks and clip paths remain, with internal IDs prefixed to avoid collisions between icons. Stylesheets, external references, text, embedded images and SVG use references are excluded in this version.

Does the color control recolor every path?

It changes the preview currentColor. Artwork with explicit fill or stroke colors keeps those values.

No. Parsing, previews and downloads happen in this browser. Each file is limited to 1 MB and the library to 100 icons.

SVG Icon Sprite Builder

Combine SVG icons into a reusable symbol sprite with safe local previews, editable IDs, HTML snippets and a portable manifest.

Symbol inspector

Paste SVG source

Symbol IDPreview colorPreview size: 48pxHTML usage

Host sprite.svg with your page. Symbol artwork preserves original fill/stroke colors; the preview color applies to currentColor. Supply an accessible label for meaningful icons, or keep aria-hidden for decoration.

Icon library

Loading Tool…

What Is the SVG Icon Sprite Builder?

Build a vector symbol library from separate SVG icons. Unlike a raster sprite sheet, each icon stays a scalable symbol referenced by an SVG use element. Import up to 100 icons, inspect their shapes, rename identifiers and export one sprite plus an ID/viewBox manifest.

How It Works

Add SVG files, select an icon to edit its ID, and adjust preview size or currentColor. Download sprite.svg, host it with your page and copy the provided HTML snippet. Review previews after sanitization, which removes scripts, styles, external resources and unsupported artwork.

When to Use It

Prepare reusable UI icon libraries for a website or application. The sprite uses standard SVG symbol and use elements; it does not generate a font or a raster atlas.

Frequently Asked Questions

What happens to gradients and clipping?: Supported gradients, masks and clip paths remain, with internal IDs prefixed to avoid collisions between icons. Stylesheets, external references, text, embedded images and SVG use references are excluded in this version.
Does the color control recolor every path?: It changes the preview currentColor. Artwork with explicit fill or stroke colors keeps those values.
Are files uploaded?: No. Parsing, previews and downloads happen in this browser. Each file is limited to 1 MB and the library to 100 icons.

Found an issue? Send Feedback. See our data sources and update policy for tools that depend on changing information.