SVG Sprite Builder

Paste a list of named SVGs and get back a single combined sprite sheet with one <symbol id="..."> per icon, plus the matching <use> snippet for every entry. Drop the sprite once into your page's <body> and reference any icon from anywhere with <svg><use href="#icon-foo"/></svg>. Marker-delimited or auto-named, viewBox warnings surfaced, duplicate names auto-suffixed. Pure client-side, no upload.

Paste your SVGs

One <svg> block per icon. Add a marker line like # name: arrow-right before each block to set its id; otherwise the tool auto-names them icon-1, icon-2, … Markers can be #, //, --, or <!-- ... -->.

Options

Sprite

—

Use snippets

One <use> block per symbol. Paste them into your markup; they reference the sprite via href.

Live preview

The sprite is inlined into a hidden <svg> at the top of this panel; the icons below are <use> references. If they don't render, your browser likely blocks the inline <svg> (e.g. inside <img> or background-image) — copy the sprite into your HTML and reference it from there.

How to use the sprite

  1. Paste the sprite anywhere in your <body>. It's hidden via style="display:none", so it takes up no visible space.
  2. Anywhere you want an icon, paste the matching use snippet: <svg width="24" height="24"><use href="#icon-arrow-right"/></svg>
  3. Style via currentColor: if the source path uses stroke="currentColor" or fill="currentColor", the icon will inherit the surrounding color.