SVG to JSX Converter

Convert SVG to JSX online for free — paste SVG markup or open a file and get valid JSX or a ready-to-use React component, with camelCased attributes, className, style objects, {…props}, optional currentColor and TypeScript. Runs 100% in your browser.

100% private — everything runs in your browser. Conversion happens on your device; nothing is uploaded.

SVG

Open .svg file

JSX

Component name

Converts attributes to JSX (stroke-width → strokeWidth, class → className, style strings → objects) and strips editor metadata. To shrink the SVG first, run it through our SVG Optimizer. Nothing is uploaded.

How to convert SVG to JSX

Paste your SVG or open an .svg file.
Set the component name.
Choose options: React component, {…props}, TypeScript, currentColor, remove width/height.
Copy the JSX or download the .jsx / .tsx file.

What you can use it for

Turn icons from Figma, Illustrator or icon sets into React components
Make SVG icons inherit text colour with currentColor
Build a typed icon library in TypeScript
Paste SVG into JSX without attribute errors

More free tools

Building for the web?

Format, minify, convert and generate code with our free, private developer tools.

JSON Formatter CSS Minifier HTML Minifier JS Minifier SVG Optimizer CSS Grid Box Shadow Gradient Generator

See all free tools →

Frequently asked questions

Why can't I paste SVG straight into React?

JSX uses camelCase attribute names (strokeWidth, not stroke-width), className instead of class, and style objects instead of strings. This tool rewrites all of those for you.

What does “Use currentColor” do?

It replaces fill and stroke colours with currentColor, so the icon takes the text colour of its parent — easy to theme with CSS.

Does it optimise the SVG?

It removes editor metadata, XML declarations and comments. For deeper optimisation, run the SVG through our SVG Optimizer first.

Is my SVG uploaded?

No. Conversion runs in your browser.