How many SVG files can I upload?

Up to 30 SVG files, each up to 2 MB.

What is the difference between symbol and view mode?

Symbol mode emits for inline . View mode emits plus pairs for external-file fragments such as .

How are icon IDs created?

IDs are taken from filenames, sanitized to [A-Za-z0-9_-]. Names that start with a digit get an i- prefix, then your optional ID prefix is added.

When is viewBox added?

If an SVG has no viewBox, it is derived from width and height as 0 0 W H.

Is fill and stroke always removed?

No. Enable Strip fill/stroke only when you want icons to inherit currentColor. Script tags and on* attributes are always removed.

Elysia Tools

Navigation

Media

SVG Sprite Sheet Generator

Merge up to 30 SVG icons into one sprite sheet (symbol or view mode) with viewBox normalization, dedup, optional currentColor stripping, sanitization, live preview and usage snippets.

Details

What this tool helps you do

symbol mode emits <symbol id viewBox> entries for inline <use href="#id">; view mode emits <view id viewBox> + <g id> pairs for external-file fragments (<use href="sprite.svg#id">). viewBox is derived from width/height (0 0 W H) when missing. IDs come from filenames (sanitized to [A-Za-z0-9_-], i- prefix when starting with a digit, plus your prefix). Dedup hashes viewBox + whitespace-collapsed content. <script> elements and on* attributes are always removed.

Execution

Run this tool

Fill in the form, run the tool, and review the result in one place.

Prepared example runs

Click an example to fill the form automatically. File inputs still need an upload.

2 examples

Merge three sample SVGs into a symbol sprite

The three basic sample SVGs (360×240 viewBoxes) merge into a symbol-mode sprite; the leading-digit filenames gain the i- prefix, and HTML/React/Vue snippets are generated.

<section class="ssg">3 icons · symbol mode · ids i-01-basic-shapes, i-02-stroke-and-fill, i-03-transforms · sprite source + usage snippets</section>

View-mode sprite with a custom icon- prefix

The icon-set and responsive samples merge in view mode with an “icon-” id prefix — output carries <view id viewBox> plus <g id> fragments for external-file references (digit-leading names become icon-i-…).

<section class="ssg">2 icons · view mode · ids icon-icon-set, icon-i-11-responsive · <view> + <g> fragments</section>

Inputs

Set the required fields, then run the tool.

5 options

FilesUpload source files for this workflow.1

SVG files (up to 30)fileRequired

Per-file max size: 2.0 MB / Max files: 30Supported types: image/svg+xml

ContentPaste or type the main input values.1

ID prefixtextOptional

SettingsAdjust formats, ranges, numbers, and modes.1

Sprite typeselectOptional

TogglesEnable or disable optional behavior.2

Strip fill/stroke (for currentColor)checkboxOptionalEnabled when checkedDeduplicate identical iconscheckboxOptionalEnabled when checked

Result

Ready for a run

Run the tool to preview files, text, structured data, or streamed output here.

Samples

SVG Sprite Sheet Generator

What this tool helps you do

Run this tool

Prepared example runs

Inputs

Result

Examples that match this tool

Continue with connected tools and hubs

Prepared example runs

Inputs

Result

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. Merge three sample SVGs into a symbol sprite

2. View-mode sprite with a custom icon- prefix

FAQ

XML Viewer Samples

XML Samples

SVG Samples

SVG Viewer Samples

Data URI Generator

PDF Header/Footer Snippets

SVG Favicon Generator

Convert SVG to JPG

Image Format Conversion and Animated Export Tools

XML Conversion, Mapping, and XPath Tools

HTML Extraction, Cleanup, and Markdown/PDF Export Tools

Image Cleanup, Framing, and Batch Prep Tools