SVG to JSX Converter
Convert an SVG icon or HTML snippet to JSX — camelCased attributes, inline styles as a style object, self-closed void tags, optional component wrapper.
You can also drop an .svg or .html file on the box.
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.
Opens that tool in this tab with this SVG, the options above applied, as a file. Not the JSX: the picture it draws.
Result: 4 lines, 274 charactersWhat this is for: JSX to paste inside a React or Preact component, where its markup goes (in return ( … )). It is no longer SVG — an <img> tag or a browser cannot open it; for a picture, use the SVG itself.
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; tick TypeScript (.tsx, typed props) as well and its props are typed as SVGProps<SVGSVGElement>, and the download is a .tsx file. Set Framework to Vue (single-file component, .vue) and the same paste comes out as a Vue <template> instead, its attributes as written — no className, no camelCase, no style object — with the currentColor, Clean up first and Width and height options still applied, and it downloads as a .vue file named for the component.
Getting an exported icon ready
The other options stay off, or As written, until you change them. The currentColor box replaces every fixed fill and stroke colour with currentColor — none, url(#…) and var(…) are left alone — so the icon takes the text colour around it. Clean up first drops editor metadata, comments, ids nothing refers to and empty groups, and says how many bytes that saved. Width and height can remove the size so the icon scales to its container, or set it to 1em so it sizes with the text, writing a viewBox from the width and height when there is none. A Preview shows the SVG as the browser draws it, with the same options applied, and Send the SVG to opens the image converter (for a PNG, JPG or WebP) or File to Base64 (for a data URI) in the same tab with that SVG already in it as a file — the picture, not the JSX. Every setting is kept in the address, so a reload keeps it, and Copy link makes a link that also carries the pasted markup and the component name, which the address bar itself never shows.
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).
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.
Can it make the icon follow the text colour and size?
Yes. Tick the currentColor box and every fixed fill and stroke colour — in attributes and inside style — becomes currentColor, while none, url(#…), var(…), inherit and transparent are kept. Set Width and height to 1em (sizes with the text) and the icon scales with the font, or Remove (scales to its container) to let CSS size it. When the SVG has no viewBox, one is written from a plain-number width and height first; without those, the size is kept rather than dropped.
Can the component forward a ref, take a title, or target React Native?
Yes, once Wrap as a React component is on. “Forward a ref to the root (forwardRef)” and “Wrap in React.memo” wrap the export, with the one import from react they need. The title prop and desc prop options draw a <title> or <desc> as the svg’s first child and point aria-labelledby or aria-describedby at it, and a <title> the file already had becomes the prop’s default. “React Native (react-native-svg)” renames each element to its react-native-svg component, imports the ones used, and names any element it had to leave out.
Can it write a Vue component, or a link that hands the whole conversion to someone?
Yes. Set Framework to Vue (single-file component, .vue) and the markup comes out inside a <template>, attributes as written, with a {{ in the text written as character references so Vue does not read it as an expression; the currentColor, Clean up first and Width and height options still apply, the React-only switches step aside, and Download saves a .vue file named after the Component name. Every setting also rides in the address, and Copy link builds a link that carries the pasted markup and the component name as well, kept out of the address bar itself.