# 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. > Canonical page: https://elysiatools.com/en/tools/svg-sprite-generator - **Category:** Media - **Keywords:** svg sprite, sprite sheet, svg symbol, icon set, use element ## Overview \`symbol\` mode emits \`\` entries for inline \`\`; \`view\` mode emits \`\` + \`\` pairs for external-file fragments (\`\`). 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. \`\` elements and on\* attributes are always removed. ## Inputs - **SVG files (up to 30)** (file): Select up to 30 .svg icon files - **Sprite type** (select) - **ID prefix** (text): e.g. icon- - **Strip fill/stroke (for currentColor)** (checkbox) - **Deduplicate identical icons** (checkbox) ## When to use - You have a set of SVG icons to combine into a single sprite instead of loading many separate files. - You need symbol-mode sprites for inline or view-mode sprites for fragments. - You want viewBox filled in, IDs from filenames, optional color stripping, and HTML/React/Vue usage snippets. ## How it works - Select up to 30 .svg files (max 2 MB each). Pick sprite type (symbol or view), optional ID prefix, whether to strip fill/stroke, and whether to deduplicate. - viewBox is set to 0 0 W H from width/height when missing. IDs come from filenames (kept as \[A-Za-z0-9_-\], i- added if they start with a digit, then your prefix). Identical icons are hashed by viewBox plus whitespace-collapsed content when dedupe is on. - elements and on\* attributes are always stripped. Symbol mode outputs for inline use; view mode outputs plus pairs. Preview and usage snippets are generated from the result. ## Use cases - Bundle a UI icon set into one sprite for inline in HTML, React, or Vue. - Build an external sprite.svg with view fragments for . - Normalize viewBoxes, drop duplicate icons, and strip hard-coded colors so icons follow CSS currentColor. ## Frequently asked questions ### 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. ## Related tools - [Data URI Generator](https://elysiatools.com/en/tools/data-uri-generator): Convert files into Data URIs (Base64 or percent-encoded) for inlining images, fonts, and assets directly into HTML, CSS, or Markdown - [PDF Header/Footer Snippets](https://elysiatools.com/en/tools/pdf-header-footer-snippets): Convert HTML to PDF with reusable logo, title, and date snippets - [SVG Favicon Generator](https://elysiatools.com/en/tools/svg-favicon-generator): Turn an SVG or raster logo into a complete favicon pack with ICO, PNG variants, Apple touch icon, and web manifest - [Convert SVG to JPG](https://elysiatools.com/en/tools/svg-to-jpg): Convert SVG vector graphics to JPG raster format with customizable resolution, quality, and background options - [SVG to PDF](https://elysiatools.com/en/tools/svg-to-pdf): Convert SVG vector graphics to PDF documents for printing and sharing - [Convert SVG to PNG](https://elysiatools.com/en/tools/svg-to-png): Convert SVG vector graphics to PNG raster format with customizable resolution, quality, and transparency options - [Convert SVG to WebP](https://elysiatools.com/en/tools/svg-to-webp): Convert SVG vector graphics to WebP raster format with modern compression and transparency support - [Accessibility Checker](https://elysiatools.com/en/tools/accessibility-checker): Detect common WCAG 2.1 accessibility issues in HTML, fetched pages, or design images and return fix-ready guidance ## Samples - [XML Viewer Samples](https://elysiatools.com/en/samples/xml-viewer-samples): Sample XML files (bookstore, RSS feed, SVG) for the in-browser XML Viewer - [XML Samples](https://elysiatools.com/en/samples/xml-samples): XML (eXtensible Markup Language) format examples from simple to complex structures - [SVG Samples](https://elysiatools.com/en/samples/svg-samples): Scalable Vector Graphics (SVG) samples demonstrating various SVG features and techniques - [SVG Viewer Samples](https://elysiatools.com/en/samples/svg-viewer-samples): Sample SVG vector graphics (scene, icon set, diagram) for the in-browser SVG Viewer ## Related content - [Image Format Conversion and Animated Export Tools](https://elysiatools.com/en/hubs/image-convert): Compare image format converters for JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64, and animation-friendly exports in one hub. - [XML Conversion, Mapping, and XPath Tools](https://elysiatools.com/en/hubs/xml-convert): Curated tools for XML conversion, mapping, merging, and XPath extraction in one hub. - [HTML Extraction, Cleanup, and Markdown/PDF Export Tools](https://elysiatools.com/en/hubs/html-convert): Compare HTML cleanup, attribute extraction, image-source extraction, HTML-to-Markdown, and HTML-to-PDF tools in one hub for web content conversion workflows. - [Image Cleanup, Framing, and Batch Prep Tools](https://elysiatools.com/en/hubs/image-utility): Compare image cleanup, trimming, padding, framing, batch resize/compress, watermarking, and visual polish tools in one hub for asset preparation workflows.