SVG to JSX Converter
About this tool
Paste any SVG and get a clean React component — attribute renames, color-to-prop swaps, forwardRef wrap with TypeScript and a size prop, and a live preview on light and dark backgrounds. Built for converting Figma exports, icon-library SVGs, and inline marketing graphics into shippable component code.
Why use this converter?
How to use this converter
Common SVG → JSX renames
Every hyphenated SVG attribute (stroke-width, fill-rule, clip-path, …) and every HTML reserved-word attribute (class, for, tabindex, …) must be renamed for React to render the element. The converter handles 80+ such renames automatically; here are the ones you'll hit most.
| SVG / HTML | JSX | Why |
|---|---|---|
class | className | Reserved word in JS |
stroke-width | strokeWidth | Hyphenated SVG attr → camelCase |
fill-rule | fillRule | Hyphenated SVG attr → camelCase |
clip-path | clipPath | Hyphenated SVG attr → camelCase |
xlink:href | xlinkHref | Namespaced → camelCase. Per SVG 2 you can use plain href. |
viewbox | viewBox | React enforces camelCase even though SVG is case-insensitive |
tabindex | tabIndex | HTML attr → camelCase |
style="fill:red" | style={{ fill: "red" }} | Inline CSS → object literal with camelCase keys |
| {/* comment */} | HTML comment → JSX block comment |
| | Void-like SVG elements must self-close in JSX |
What the output looks like
import { forwardRef } from 'react';
export const Check = forwardRef(
function Check({ size = 24, color1 = '#7C6CFF', ...rest }, ref) {
return (
<svg ref={ref} width={size} height={size} viewBox="0 0 48 48" fill="none" {...rest}>
<rect x="4" y="4" width="40" height="40" rx="8" fill={color1}/>
<path d="M16 24L22 30L34 18" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
);
}
); <svg viewBox="0 0 48 48" fill="none">
<rect x="4" y="4" width="40" height="40" rx="8" fill={color1}/>
<path d="M16 24L22 30L34 18" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
</svg> <Check size={32} color1="var(--brand)" className="text-white" /> Pro tips
Frequently asked questions
How is this different from svgr or svg2jsx?
Most online SVG-to-JSX converters output a JSX snippet. This one outputs a real React component: wrapped in forwardRef, optionally typed with SVGProps<SVGSVGElement>, and reshaped so a size prop works. The standout feature is the color extraction grid — every distinct color in your SVG appears as a clickable swatch, and clicking cycles through static / currentColor / exposed prop with the output rewriting in real time. Other tools leave that cleanup as a manual grep-and-replace.
What's currentColor and when should I use it?
currentColor is a CSS keyword that resolves to the parent element's text color at render time. For monochrome icons (Lucide, Heroicons, Phosphor), setting fill or stroke to currentColor means the icon picks up whatever color={...} or className adds to its parent — so the same component recolors itself across the app without any prop drilling. Use it for any icon that should always match nearby text.
How does the multi-color prop exposure work?
For brand marks or icons with two or three accent colors, click each color swatch through to 'prop' mode. The converter generates color1, color2, color3 props on the component with the original hex values as defaults. Consumers can then recolor the mark per theme — for example <Logo color1='var(--brand)' color2='var(--accent)' /> — without forking the SVG file or maintaining multiple variants.
Does the output work with TypeScript?
Yes — toggle the TypeScript option to emit a .tsx file with a typed Props interface that extends React's SVGProps<SVGSVGElement>. Every prop you expose (size, color1, color2, …) is typed, and the forwardRef generic is parameterized so the ref is typed as SVGSVGElement. The default is JavaScript output, which is fine for most React projects that don't strictly require .tsx for components.
Are my SVGs uploaded anywhere?
No. Conversion runs entirely in your browser — paste, drop, or load an example, all of it stays on your device. There's no network request involved, no telemetry on the conversion contents, and no analytics on what you paste. The site itself uses cookieless analytics (page views only) but the tool never reads or transmits your SVG data.
What if my SVG has Inkscape or Sodipodi metadata?
Turn on 'Clean output' (it's on by default) and the converter strips Inkscape and Sodipodi namespace attributes (sodipodi:nodetypes, inkscape:label, inkscape:groupmode, etc.) along with xmlns, version, the XML prolog, and HTML comments. The issues panel below the converter flags this metadata when it's present so you know it's being stripped.