SVG to JSX Converter
Convert SVG markup into a ready-to-use React JSX component.
A free SVG to JSX converter: paste SVG markup and get a clean React component back — class becomes className, hyphenated attributes like stroke-width are camelCased, inline styles become style objects and viewBox is preserved. Optionally wrap it in a named component, spread {...props}, output TypeScript or memoize it. Runs fully in your browser — nothing is uploaded.
How to use SVG to JSX Converter
Paste your SVG
Drop raw SVG markup into the input box, or upload a .svg file, and this free online SVG to JSX converter parses it safely in your browser.
Name the component
Choose a component name so the generated React component is exported ready to import, matching how you organise icons in your project.
Toggle props spread
Enable the spread props option to add {...props} to the root svg element, letting callers pass width, className, onClick and aria labels through.
Pick TypeScript output
Turn on TypeScript to emit a typed .tsx component with SVGProps, and optionally wrap it in React.memo for a clean, reusable icon component.
Watch the live conversion
The clean JSX appears instantly on the right, with class becoming className, stroke-width becoming strokeWidth and inline styles turned into objects.
Copy or download
Copy the React component to your clipboard or download it as a .jsx or .tsx file, then drop the converted SVG straight into your codebase.
Frequently asked questions
How do I convert an SVG to JSX?
Paste your SVG markup into the box on the left (or upload / drop a .svg file) and the React component appears on the right instantly. Copy it or download it as a .jsx/.tsx file — there's nothing to configure to get started.
Why can't I just paste SVG straight into React?
JSX isn't HTML. Attributes like class, for and the hyphenated SVG presentation attributes (stroke-width, fill-rule, clip-path…) have to be camelCased, and inline style must be an object, not a string. This tool applies all of those rules for you so the markup actually compiles.
Can I get a TypeScript component?
Yes. Turn on TypeScript and the component is typed with React.SVGProps<SVGSVGElement> and emitted as a .tsx file. Combine it with the {...props} spread so callers can pass width, height, className or event handlers.
What does the “Spread {...props}” option do?
It adds {...props} to the root <svg> element so any props you pass to the component — size, color via className, aria-label, onClick — flow through to the SVG. It's the standard pattern for reusable icon components.
Is my SVG uploaded anywhere?
No. Parsing and conversion happen entirely in your browser using the native XML parser in an inert document — scripts never run and nothing you paste is sent to a server, so it's safe for private or unreleased artwork.
Do you have a React Native version?
Yes — use the SVG to React Native converter, which maps the elements to react-native-svg components (<Svg>, <Path>, <G>…) and builds the import for you.
Related tools — Developer · React converters
- HTML to JSX Converter — Convert HTML to React JSX — and JSX back to HTML.
- SVG to React Native Converter — Turn SVG into a react-native-svg component for iOS & Android.