How do I convert an SVG to a React component?

Paste the SVG in and pick the React output. Attributes are renamed to their JSX spellings, the markup is wrapped in a component, and props are forwarded so size and colour can be set from the call site. Nothing is uploaded - the conversion happens in the tab.

What does the optimiser actually remove?

Comments, metadata blocks, the namespaced attributes drawing applications leave behind, and empty groups. Numbers are rounded to the precision you choose, and a viewBox is added when the file is missing one.

Why does it not merge paths or flatten transforms?

Because those save bytes but can change what the file looks like, and can break an id something else references. A smaller icon that renders differently is not a win, so the optimiser stops short of anything that risks it.

Can it convert an SVG to Android VectorDrawable?

Yes. VectorDrawable only draws paths, so rectangles, circles and polygons are converted to paths first. Gradients, filters and text have no equivalent - those are reported to you rather than dropped silently.

SVG toolkit

Strip the editor leftovers out of an SVG, round its numbers, then take it out as a React, Vue, React Native, Flutter or Android component. Everything happens in this tab - the file is never uploaded anywhere.

Outputs10 formats
Your fileNever leaves the tab
Typical saving40-60% of the bytes

Your SVG

Paste the markup, or drop an .svg file onto the box.

Component nameUsed as Icon in the generated code.Decimal places: 2Fewer places, smaller file. Two is safe for icons.

Remove unused idsReferenced ids are always kept.Remove width and heightLets CSS size the icon. The viewBox is kept.

Preview

560 B → 272 B, 51% smaller

1 comment removed
3 editor attributes removed

Output

272 B · Icon.svg

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g><circle cx="24" cy="24" r="20" fill="#2563eb"/><path d="M16 24.5L21.5 30L33 17.5" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g></svg>

Nothing here was uploaded - the conversion ran in this tab.

What the optimiser removes

Comments, metadata blocks and the namespaced attributes drawing applications leave behind, plus empty groups. Numbers are rounded to the precision you choose, and a viewBox is added when the file is missing one.

What it deliberately does not do

It will not merge paths, flatten transforms or drop ids that something references. Those save bytes but can change what the file looks like, and a smaller icon that renders differently is not a win.

About the Android output

VectorDrawable only draws paths, so rectangles, circles and polygons are converted first. Gradients, filters and text have no equivalent - those are reported rather than dropped silently.

Frequently asked questions

How do I convert an SVG to a React component?: Paste the SVG in and pick the React output. Attributes are renamed to their JSX spellings, the markup is wrapped in a component, and props are forwarded so size and colour can be set from the call site. Nothing is uploaded - the conversion happens in the tab.
What does the optimiser actually remove?: Comments, metadata blocks, the namespaced attributes drawing applications leave behind, and empty groups. Numbers are rounded to the precision you choose, and a viewBox is added when the file is missing one.
Why does it not merge paths or flatten transforms?: Because those save bytes but can change what the file looks like, and can break an id something else references. A smaller icon that renders differently is not a win, so the optimiser stops short of anything that risks it.
Can it convert an SVG to Android VectorDrawable?: Yes. VectorDrawable only draws paths, so rectangles, circles and polygons are converted to paths first. Gradients, filters and text have no equivalent - those are reported to you rather than dropped silently.