SVG to JSX Converter
Convert an SVG icon or any HTML snippet to JSX — camelCased attributes, inline styles as a style object, optional component wrapper. Free, in your browser.
Paste an SVG icon or any HTML snippet — attributes become JSX (class → className, stroke-width → strokeWidth, xlink:href → xlinkHref), inline styles become a style object, and void tags self-close. Braces and angle brackets in text become character references, because JSX reads them as code.
🔒 Converted in your browser — nothing is uploaded.
Turn SVG and HTML into JSX
Paste an SVG icon exported from Figma, Illustrator or an icon set — or any HTML snippet — and get JSX you can drop straight into a React or Preact component. Every attribute is renamed to its JSX form, inline styles become a style object, and void tags are self-closed. Everything runs in your browser.
What gets converted
class→className,for→htmlFor- hyphenated SVG attributes like
stroke-width→strokeWidthandstroke-linecap→strokeLinecap - namespaced attributes like
xlink:href→xlinkHref - an inline
stylestring becomes astyleobject with camelCased keys - void elements (
br,img,input) and empty tags are self-closed data-*andaria-*attributes are kept as-is{,},<and>in text content become character references ({,<), because JSX reads them as code
SVG to JSX and HTML to JSX
HTML-to-JSX is the same transform, so this works for form markup, tables and any HTML you paste — not just icons. Turn on Wrap as a React component to get a ready-to-use, default-exported component with props spread onto the root element.
Frequently asked questions
How do I convert an SVG into a React component?
Paste the SVG, turn on Wrap as a React component, and copy the result. You get a default-exported function that spreads props onto the root svg, so you can pass className, width or onClick when you use it.
Does it work for HTML, not just SVG?
Yes. HTML-to-JSX is the identical transform, so any HTML snippet — forms, tables, plain markup — is converted the same way (class → className, for → htmlFor, inline styles to objects).
Are my files uploaded anywhere?
No. The conversion runs entirely in your browser and nothing is sent to a server.
What happens to inline styles?
An inline style string such as color:red;font-size:12px becomes a JSX style object with camelCased property names like fontSize, with each value kept as a string.