SVG Sprite Generator
Drop in several SVG icons, get back one combined <symbol> sprite sheet
with auto-generated, collision-safe IDs.
Click to choose .svg files, or drag and drop them here
Select multiple icons at once. Stays on your device, nothing is uploaded.
Icons
How it works
Each uploaded SVG is parsed with the browser's own DOM parser, its viewBox
(or width/height, if no viewBox is set) is read, and its inner markup is wrapped in a
<symbol id="..." viewBox="..."> element. All symbols are then combined
into a single hidden <svg>, the standard "SVG sprite" pattern used to
serve many icons as one request instead of many separate image files or inline copies.
IDs are derived from each file's name and de-duplicated automatically if two files would
otherwise collide.
Parsing and combining happen entirely in this page's JavaScript. Nothing you upload is sent anywhere.
Common questions
How does a symbol sprite work?
Each icon becomes a <symbol id="..."> inside one hidden <svg>, placed once anywhere in your page's HTML. Any element then renders that icon with <svg><use href="#id"></use></svg>, so the browser downloads and parses the artwork once no matter how many times it's used.
How are icon IDs generated?
From each file's name: lowercased, non-alphanumeric characters replaced with hyphens, extension stripped. If two files would produce the same ID, a numeric suffix is added to keep every symbol addressable.
Are my icons uploaded anywhere?
No. Files are read and combined entirely in your browser using the File API. Nothing is uploaded.