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.

SVG Extractor & Cleaner

Runs in browser

Extract and clean SVG icons from HTML with color and size overrides.

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.

Paste HTML or SVG

Preview

No SVG yet

Clean SVG code

Extra options

Override color

Override size

Add background

🔒 Runs in your browser · No uploads · Your data never leaves your device

How to use

Paste HTML
Paste any HTML snippet that contains an <svg> element — including icon libraries, component source, or Figma exports.
Override colour
Enable the colour toggle to replace all fill/stroke values with a custom colour, or preserve the original palette.
Set size
Override width and height to standardise icon dimensions before exporting.
Download or copy
Copy the clean SVG or download it as an .svg file ready for production.

Common use cases

Extracting SVG icons from component source code — Paste JSX or HTML from a React icon component to get clean, standalone SVG markup ready to use or customize.
Overriding icon colors for different themes — Enable color override to replace all fill/stroke values with a single custom color for consistent icon theming.

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.

Key concepts

SVG: Scalable Vector Graphics — an XML-based image format that scales to any size without quality loss, commonly used for icons and illustrations.
viewBox: An SVG attribute defining the coordinate system and aspect ratio — ensures SVGs scale correctly at any display size.

You might find these useful too.