Turn an SVG file into JSX or a React icon component, with camelCase attributes
Runs in your browser. Nothing you type is sent anywhere. Checked against sources on 22 Oct 2026.Drop an SVG exported from Figma, Illustrator or Inkscape and get JSX: stroke-width becomes strokeWidth, xlink:href becomes xlinkHref, lineargradient gets its real case, and the XML header and editor data are removed. Type a component name and tick Pass props to get an icon component whose size and colour you set from the outside.
Paste or type your input.
Choose the options you need.
Press Ctrl+Enter, then copy or download.
Copying a snippet from a template, a design tool or an old page into a React component usually ends in a screen of warnings. This converter rewrites the markup into JSX that compiles and renders the same thing.
SVG. Attributes and tags get the case React expects, such as viewBox and linearGradient, the XML header and editor data from Inkscape or Illustrator are removed, and Pass props makes an icon component you can size from outside.
Notes. Inline handlers such as onclick are removed and listed, since JSX needs a function, not a string. Every example in the tests is compiled by TypeScript and rendered by React 19 with no warnings. Nothing is uploaded. Related tools: HTML Formatter, SVG Optimizer, JSON to TypeScript.
The rest of the article, and all 6 questions about HTML to JSX Converter, are on the HTML to JSX Converter page.
JSX compiles to JavaScript, where class is a reserved word, so React uses the DOM property name className instead. The same applies to for, which becomes htmlFor. Paste your markup above and every class and for attribute is renamed, along with tabindex, maxlength and the other camelCase names.
Each CSS declaration becomes a key and a string value inside double braces, with hyphenated names in camelCase: style="font-size: 12px" becomes style={{ fontSize: '12px' }}. Vendor prefixes start with a capital, such as WebkitTransition, and custom properties such as --gap keep their quoted name.
Yes. Open the .svg file or paste its code, type a component name and tick Pass props. The result is a function component with {...props} on the svg element, so width, height, className and colour can be set wherever it is used. Attribute names are converted to the case React expects.
In React, a field with value but no onChange handler is read-only: typing does nothing. The defaultValue and defaultChecked props set the starting value and leave the field editable, which matches how the HTML behaved. Turn off Uncontrolled forms to keep value and checked for state you manage yourself.
Rates and rules change; check the source before you rely on a figure.
Still stuck? Ask about HTML to JSX Converter and anybody who knows can answer. No account needed.
Same job, other tools: Image to Base64 – Get a data URI for any image, ready for CSS or HTML.
On the related tools: TSV to JSON – Convert tab-separated values, such as a paste from Excel, into JSON · Query String Parser – Split a URL query string into a table of decoded parameters.