Web Tools tools.bryantsmith.com

Images & SVG

SVG Sprite Builder

Combine SVG icons into one reusable <symbol> sprite. Drop or paste your icons, preview them live, then copy the markup. Everything runs in your browser — your icons never leave the page.

Runs in your browser v1.0.0

1. Add SVG icons

0 icons
Paste SVG markup instead

Paste one or more complete <svg> blocks. Each block becomes a symbol.

    2. Live preview

    from your icons

    3. Sprite markup

    0 B

    Reference an icon with <svg><use href="sprite.svg#icon-star"></use></svg>.

    How it works

    Each icon’s viewBox and inner artwork are extracted and wrapped in a <symbol> with a unique id, then combined into one <svg> sprite. Internal ids (gradients, clips, masks) are renamed per icon so icons never collide when merged.

    Icons are sanitized before use: <script>, <foreignObject>, inline event handlers, embedded <style> blocks, and external or javascript: references are removed. Processing stays in your browser — no uploads, no accounts.

    Related tools

    • SVG Icon Preview SheetPaste or load many SVG icons into a searchable labeled preview grid and export the set as a sprite.
    • Base64 Image ConverterConvert an image to a Base64 data URI or decode a data URI back into a downloadable image — all in your browser.
    • Favicon GeneratorTurn one source image into favicon.ico, PNG icons, a web app manifest and copy-ready HTML link tags — entirely in your browser.
    • Image CompressorCompress images in your browser with a live before/after quality comparison and instant size savings.
    • Image CropperCrop images in your browser with freeform handles, exact pixel fields, or common aspect ratio presets.
    • Image Dimension InspectorDrop in an image to instantly read its dimensions, aspect ratio, file size, MIME type, and metadata — all in your browser.

    More Images & SVG tools