Design Tools
SVG to JSX Converter
Paste any SVG and get valid JSX — attributes converted to camelCase, class renamed to className, and empty elements self-closed. Perfect for React components and React Native icons. Everything runs in your browser.
What makes this tool different
camelCase attributes
stroke-width becomes strokeWidth, clip-path becomes clipPath, and fill-rule becomes fillRule automatically.
className conversion
The class attribute is renamed to className, exactly as React expects.
Self-closing tags
Empty elements like <line> and <path> are emitted as self-closing tags to avoid React warnings.
React Native mode
Switch to React Native output for use with react-native-svg icon components.
About this tool
SVG to JSX Converter: everything you need to know
SVGs are the foundation of modern icon systems, but pasting SVG markup straight into a React component rarely works. React requires camelCase attributes, className instead of class, and self-closing tags for every empty element — differences that cause silent styling failures and console warnings when they are missed.
This SVG to JSX converter handles every rewrite automatically. Hyphenated attributes like stroke-width, clip-path, and fill-rule become strokeWidth, clipPath, and fillRule. The class attribute becomes className. Empty elements are self-closed. The result is valid JSX that renders exactly like the original SVG.
The conversion happens live as you paste, so you can iterate quickly — drop in an icon from your design tool, tweak the SVG, and watch the JSX update. Copy the output into a component file and it is ready to render.
A React Native mode tailors the output for react-native-svg, keeping the SVG structure while producing the JSX form the library's elements expect. That makes the tool useful for building icon components for both web and mobile apps from the same source.
Because the converter runs entirely in your browser, there are no privacy concerns — your SVG markup never leaves your device, and the tool works offline. Open the DevTools Network tab and you will see zero requests.
Pair this with a naming convention and props pattern — width, height, className — and you have a repeatable workflow for turning any SVG into a reusable, consistent React icon component in seconds.
FAQ
SVG to JSX Converter — frequently asked questions
How do I use SVG in React / JSX?
Paste your SVG markup into a JSX component and fix the differences: rename class to className, convert hyphens to camelCase, and self-close empty elements. This converter does all three automatically so the SVG renders without errors.
What's the difference between SVG and JSX syntax?
JSX follows the same markup but requires camelCase attribute names (strokeWidth, clipPath), className instead of class, and self-closing for every empty element. Attributes like viewBox stay as-is, and event handlers like onClick replace onload.
How do I convert SVG to a React component?
Convert the markup with this tool, then wrap it: export default function Icon() { return <svg {...}></svg>; }. Optionally accept props like className and size and spread them onto the svg element for a reusable icon component.
How do I use SVG in React Native (react-native-svg)?
Install react-native-svg and use its elements (Svg, Path, Circle, Rect) instead of the web DOM versions. Use this tool's React Native mode, which keeps the SVG structure while converting attributes to the JSX form react-native-svg expects.
What attributes change when converting SVG to JSX?
Hyphenated attributes become camelCase (stroke-width → strokeWidth, clip-path → clipPath, fill-rule → fillRule), class becomes className, for becomes htmlFor, and SVG attributes with special names like xlink:href are handled explicitly.
Why won't my SVG render in React?
Common causes: class instead of className (React logs a warning and the style is lost), hyphenated attributes that do nothing, and unclosed empty elements. Running the SVG through this converter fixes all of these and produces valid JSX.
Is there an npm package for SVG to JSX?
Yes — packages like svgr and html-to-jsx convert SVG to React components programmatically. This tool gives the same result without installing anything: paste, convert, and copy, all in your browser.
Is the SVG to JSX converter free and private?
Yes. OpenToolLab's SVG to JSX converter is completely free, requires no signup, and converts everything in your browser — your SVG never leaves your device.
Keep exploring