Why SVG markup doesn't paste directly into JSX
Raw SVG markup uses HTML/XML attribute names that JSX doesn't accept as-is: class instead of className, hyphenated attributes like stroke-width and fill-rule (JSX requires camelCase for these, mirroring how React exposes DOM properties), and inline style="..." strings where JSX expects a style object. Paste an SVG straight into a React component and you'll get a build error or an unstyled/broken render.
This tool rewrites those attributes — class → className, stroke-width → strokeWidth, style strings → style={{ ... }} objects, and about two dozen other SVG-specific attributes (fillRule, clipPath, textAnchor, stopColor, and more) — so the output can be dropped directly into a JSX return statement.
When to use it
Use it whenever you're turning a designer-exported icon or illustration into a React component — copy the SVG from Figma, Illustrator, or an icon library's raw markup, convert it here, then wrap the JSX output in a component function. It's especially useful for one-off custom icons that don't exist in an icon library like Lucide or Heroicons, where hand-converting dozens of attributes by hand is tedious and error-prone.
For SVGs with a lot of leftover editor cruft (empty defs, XML declarations, comments), run them through the SVG Optimizer first — cleaning the markup before converting keeps the resulting JSX shorter and easier to read.
Example
Input: <svg fill-rule="evenodd" stroke-width="2" style="fill: red; stroke-linecap: round;">...</svg>
Output: <svg fillRule="evenodd" strokeWidth="2" style={{"fill": "red", "strokeLinecap": "round"}}>...</svg> — every hyphenated attribute is camelCased, and the style string becomes a proper JS object, ready to paste into a return statement.
How to use the SVG to JSX tool
- 1
Paste your SVG markup
Copy the full <svg>...</svg> source you want to use as a React component.
- 2
Click Convert to JSX
class, hyphenated attributes, and inline style strings are rewritten to their JSX equivalents.
- 3
Review the output
Check that no attribute was missed, especially for less common SVG properties.
- 4
Copy or share
Copy the JSX, or copy a permalink that restores your input for anyone who opens it.
Frequently asked questions
Is my SVG uploaded anywhere?
No — conversion runs entirely in your browser, and the tool works from pasted markup rather than a file upload so nothing ever leaves your machine.
Does it convert every possible SVG attribute?
It covers the common ones — class, fill-rule, clip-path, stroke-*, font-*, stop-color, xlink:href, and similar — but a handful of very obscure or vendor-specific attributes may not be in the mapping. Scan the output for any remaining hyphenated attribute names before using it.
What about the xmlns attribute — should I remove it?
It's left in place. xmlns is valid as a JSX prop and harmless in a React-rendered SVG, so there's no need to strip it unless you're nesting the markup inside another <svg> that already declares it.
Can I convert a whole icon set at once?
This tool handles one SVG at a time by design, since it's a markup transform, not a build tool. For batch conversion of many icon files into components, use a dedicated codegen tool like SVGR as part of your build.
Related on TechLogHub
Related Image Tools
Image to Base64
Convert images to Base64-encoded data URIs
Base64 to Image
Convert Base64 strings back to downloadable images
Image Resizer with Locked Aspect Ratio
Resize images client-side with custom dimensions
Image Cropper
Crop images with a visual selection tool
Image Format Converter
Convert images between PNG, WebP, and JPEG formats
Image Color Palette Extractor
Extract dominant colors from any image
Get the next tool before you need it
One email a week: new and trending developer tools, fresh comparisons, and what shipped. Unsubscribe in one click.