SVG tool

SVG to JSX Converter

Paste an icon and get inline JSX or a React component. Attributes become camelCase. Conversion stays on your device.

Like the tool? Find a bug?Share with us

Converter

Advanced

Paste SVG. Attributes become camelCase JSX. Convert in this tab. Files stay on this device.

SVG inputSupported files: .svg

0 / 50,000

JSX output

JSX will appear here.

Preview

SVG preview appears here.

Guide

How this SVG to JSX converter works

SVG becomes JSX

stroke-width becomes strokeWidth, class becomes className, and empty tags self-close. JSX is the inline markup you drop into a render.

Or a React component

Component wraps the SVG in a named function. TypeScript uses SVGProps<SVGSVGElement>. Props spreads onto the root svg.

Runs in your tab

Sample, Nested, and Icon are starting points. Parsing uses the browser DOM — there is no server round-trip. Scripts inside the SVG are stripped.

Use it

What converts well

Icons with paths, groups, gradients, and presentation attributes. currentColor turns black fills and strokes into themeable icons. No size drops width and height so the SVG scales from viewBox. The 50,000 character cap still applies.

FAQ

Questions

Does this upload my SVG?

No. Conversion runs in the browser. There is no account and no API call.

JSX or Component?

JSX is the <svg> element for an existing render. Component is a copy-ready React function — named export, default export, or local, in JS or TS.

Why did fill become currentColor?

The Icon sample turns that on. Use currentColor when the icon should inherit text color. Turn it off to keep the original blacks.

Is there a size limit?

Paste is capped at 50,000 characters so a huge dump cannot freeze the tab.