New

SVG Extractor & Cleaner

Runs in browser

Extract SVG icons from HTML snippets and export clean, optimised SVG markup. Override colours, set custom dimensions, add a background, and preview in filled or outlined mode.

SVG Extractor & Cleaner tool

No SVG yet

Extra options

Override color
Override size
Add background

How to use

  1. Paste HTML

    Paste any HTML snippet that contains an <svg> element — including icon libraries, component source, or Figma exports.

  2. Override colour

    Enable the colour toggle to replace all fill/stroke values with a custom colour, or preserve the original palette.

  3. Set size

    Override width and height to standardise icon dimensions before exporting.

  4. Download or copy

    Copy the clean SVG or download it as an .svg file ready for production.

Examples

  • Icon library SVG

    Paste an icon component from Heroicons or Lucide and extract the raw SVG.

    Output
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>

Frequently asked questions

Does this send my SVG to a server?
No. All extraction and transformation runs in your browser using DOMParser and XMLSerializer.
Can I extract multiple SVGs?
Currently one SVG is extracted per operation. Paste each source separately.

Related tools

You might find these useful too.