SVG to JSX Converter

How to use

1. 1Paste the raw SVG markup into the input on the left. Click Load sample if you want to see how it works.
2. 2Pick an output mode: JSX only for an embed-ready fragment, React component (JS) for a plain functional component, or React component (TS) for a typed component using React.SVGProps.
3. 3Set the component name if you picked a component mode. Names are auto-capitalized so React's component-naming rule is satisfied.
4. 4Toggle Drop xmlns:xlink and Self-close empty elements to taste, then read the converted output on the right and verify the live SVG preview matches your source.
5. 5Click Copy JSX to copy the result, then paste it into your React, Next.js, Preact, or React Native project.

About this tool

SVG to JSX Converter turns any SVG you paste into JSX that is ready to drop into a React, Next.js, or Preact component. React uses a different attribute vocabulary than HTML and XML: stroke-width is strokeWidth, stop-color is stopColor, fill-rule is fillRule, class is className, for is htmlFor, xlink:href is xlinkHref. This tool renames every attribute correctly using React's published SVG attribute table, including the long tail (alignmentBaseline, dominantBaseline, glyphOrientationVertical, panose1, vMathematical, and similar). Inline style strings such as style="fill: #1e293b; font-weight: 600;" are parsed into JSX style objects with camelCased keys and quoted string values so they pass type-checking under React.SVGProps<SVGSVGElement>. data-* and aria-* attributes are passed through untouched. The XML declaration, namespace attributes that React no longer needs, and HTML/XML comments are stripped automatically because JSX cannot host comment syntax inside tags. Pick a mode: JSX only emits just the converted markup so you can paste it inside an existing component; React component (JS) wraps the output as a functional component that spreads extra props onto the root svg so you can pass className, style, onClick, and aria-label at call sites; React component (TS) does the same with a typed SVGProps<SVGSVGElement> props signature. A live preview of the input SVG renders next to the output so you can confirm the icon looks right before pasting. Useful for converting icons from Figma, Adobe Illustrator, Iconify, Lucide, Heroicons, Font Awesome, or any handcrafted SVG into a paste-ready React component without running a build-time tool like SVGR or writing a custom Babel transform. All parsing, attribute renaming, and serialization run locally in your browser, so the icons, logos, and proprietary brand SVGs you paste here are never uploaded to a server.

Free to use. Works in your browser. No signup, no login.