⌘ K
sprite · symbol · use · local

Combine SVGs into a single <symbol> sprite

Pick multiple SVGs, get one sprite file you can include once and reference with <use href="#id" />. Runs locally.

SVG Sprite Builder
Symbols
0
in sprite
Sprite size
69 B
bytes
Usage size
0 B
bytes
Status
waiting
pick files
input · image

.svg,image/svg+xml · runs locally · nothing uploaded

output · preview
Sprite output appears here
Quick Start

How it works

Pick an image, tune the options, then download the result. Everything runs in your browser.

  1. 01

    Pick multiple SVGs

    Select all the icons you want in one sprite. Names are slugified to symbol IDs.

    Files stay in memory as an HTMLImageElement — the original bytes are never uploaded, and EXIF metadata is preserved until you explicitly transform it.

    inputuploadcanvaslocaldecode
    input · bytes*.svg · loaded
    load: image/svg+xml (multi)
    loaded · decodedcanvas · ready
  2. 02

    Parse each SVG

    The root element's viewBox and inner content are pulled out. Width/height fallbacks are applied if viewBox is missing.

    Encoder quality is exposed where the format supports it — JPEG and WebP get a 0–1 quality slider; PNG is lossless. Options re-render the canvas immediately.

    parseoptionslive previewencoderquality
    parsed · tunable0 · live
    <symbol id="..." viewBox="...">…</symbol>
    options applied · liveencoder · live
  3. 03

    Compose sprite

    All symbols go into one wrapper SVG hidden with display:none — paste it once on your page.

    Pixel work runs on the Canvas 2D context — drawImage resamples with the browser’s bilinear filter and getImageData/putImageData back per-pixel passes.

    spriterenderCanvas 2Dpreviewpx-perfect
    wrapper · resampled1 svg · px-perfect
    <svg style="display:none">…</svg>
    preview · livepx-perfect
  4. 04

    Use anywhere

    Reference each symbol with <use href="#id" /> in any <svg>.

    Downloads ship via a hidden anchor with an object URL — no server round-trip, and the file on disk is untouched. The output filename inherits a sensible suffix.

    usedownloadblobclient-sideobject URL
    ok · blobready · saved
    <svg><use href="#cart" /></svg>
    shipped · ready to shipsuccess
Pro tips

Browser-only image work that scales

Convert with quality control

JPEG/WebP let you pick a 0–1 quality. Default 0.92 is a good compromise of size and visible quality.

PNG isn&rsquo;t free

Use PNG only for transparency or sharp edges. For photos, WebP is smaller at the same perceived quality.

Strip EXIF for privacy

Photo EXIF often contains GPS, camera model, and timestamps. Strip before sharing public uploads.

Watch the colour profile

Convert to sRGB before web export. Wide-gamut images render oversaturated in non-managed browsers.

AVIF when it&rsquo;s available

AVIF beats WebP on size at the same quality. Detect support via <picture> with fallbacks.

Lazy-load below the fold

Add loading="lazy" on <img>. The browser handles scheduling — no IntersectionObserver needed.

Related toolsSVG OptimizerSVG MinifierSVG ViewerSVG to VueSVG RecolorSVG to Base64
Use Cases

When to use this tool

Common workflows it speeds up.

App icon system

One sprite shipped once, referenced everywhere. Decoded into a Canvas 2D context — original bytes never leave the tab, so you can process customer-uploaded photos, internal screenshots, or sensitive diagrams without privacy concerns.

px-perfect

CMS theme

Drop sprite into WordPress/Ghost themes. Encoders expose quality 0–1 where the format supports it (JPEG, WebP); PNG and AVIF stay perceptually lossless. Pick 0.85 for web, 0.95 for archival, 0.7 for thumbnails.

quality-tunable

Email icons

Inline sprite + use for client-side icon swapping. Pair with the EXIF Stripper before sharing user-uploaded photos publicly. Camera serial numbers, GPS coordinates, and timestamps often hide in image metadata and leak more than the picture itself.

format-aware

Design system

Single source of truth for icon shapes. Output preserves colour profile (sRGB) so it renders consistently across browsers, monitors, and print pipelines. Wide-gamut workflows can opt into Display P3 for modern Apple devices.

EXIF-safe

Perf optimisation

Beats N separate SVG requests. Re-runs only on option changes, never on window resize, so the canvas stays responsive on large images. drawImage uses the browser's bilinear filter for fast resampling.

client-side

Static site builds

Embed at build time for sub-100 ms first paint. Downloads as .png, .jpg, .webp, or .avif with the correct MIME so editors apply native handling on save. The filename inherits a sensible suffix derived from the input.

compression-ready
FAQ

Frequently asked questions

We use it if present; otherwise we fall back to width/height or 24x24.
Paste the sprite SVG once near the top of your page (or include via fetch), then use <use href="#id" /> from any other SVG.
Use fill="currentColor" in your icons and set color on the parent — CSS will theme them automatically.
Identical slugs are de-duplicated with -2, -3 suffixes.
No. Everything runs locally in your browser.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!