Free browser tool
Convert SVG to React Components Online.
Paste or drop an SVG and get a React component with real JSX attributes. Conversion runs in this tab. The file is not uploaded.
- No upload
- JSX and TSX
- No account
Converter
Runs in your browser. Your SVG is not uploaded.
Waiting for an SVG
Output
Export
Format
Prettier, single quotes, 80 columns
Optimize
Optional SVGO. ViewBox stays.
currentColor
Off by default. Can change gradients.
Width and height props
Defaults come from the SVG or viewBox.
Accessibility title
Adds an optional title prop.
Limit 500 KB. Scripts and external URLs are removed.
Converted component will appear here.
How to convert an SVG
1. Add an SVG
Paste markup, upload a .svg file, or drop one on the input. Try the sample if you want a known icon.
2. Choose the output
Pick JSX or TSX, name the component, and turn on Optimize or currentColor only if you want them.
3. Copy or download
Take the formatted component, or preview the sanitized SVG in a frame that cannot run scripts.
What changes in the component
The converter uses SVGR, which parses SVG into a syntax tree and prints JSX. It does not search-and-replace attribute names in the raw text. viewBox, paths, gradients, masks, and defs stay in the tree. Optional SVGO cleanup is off until you enable it.
| SVG | React |
|---|---|
| class | className |
| stroke-width | strokeWidth |
| stroke-linecap | strokeLinecap |
| fill-rule | fillRule |
| clip-path | clipPath |
| style="..." | style={{ ... }} |
Example
This pair was produced by the same converter as the tool above, with formatting on and width and height exposed as props. currentColor and SVGO were left off.
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
<rect width="48" height="48" rx="12" fill="url(#bg)"/>
<path d="M16 18 10 24l6 6" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M32 18 38 24l-6 6" stroke="#99f6e4" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
<path class="curve" d="M20 14c3 6 3 14 8 20" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round"/>
<defs>
<linearGradient id="bg" x1="8" y1="4" x2="44" y2="46" gradientUnits="userSpaceOnUse">
<stop stop-color="#111827"/>
<stop offset="1" stop-color="#115e59"/>
</linearGradient>
</defs>
</svg>import * as React from 'react';
const SvgIcon = ({ width = 48, height = 48, ...props }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48 48"
fill="none"
width={width}
height={height}
{...props}
>
<rect width={48} height={48} rx={12} fill="url(#bg)" />
<path
d="M16 18 10 24l6 6"
stroke="#ffffff"
strokeWidth={2.2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M32 18 38 24l-6 6"
stroke="#99f6e4"
strokeWidth={2.2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
className="curve"
d="M20 14c3 6 3 14 8 20"
stroke="#ffffff"
strokeWidth={2.2}
strokeLinecap="round"
/>
<defs>
<linearGradient
id="bg"
x1={8}
y1={4}
x2={44}
y2={46}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#111827" />
<stop offset={1} stopColor="#115e59" />
</linearGradient>
</defs>
</svg>
);
export default SvgIcon;Questions
Is my SVG uploaded?
No. Conversion runs in your browser with SVGR. The SVG is not sent to a server, saved in a database, or written to an application log. Settings such as the component name can be stored in localStorage on your device. The SVG itself is not.
Why do the attributes look different?
React does not use SVG's XML attribute names. class becomes className, stroke-width becomes strokeWidth, and a style attribute becomes a JavaScript object. SVGR parses the SVG and rebuilds the tree. Text inside the graphic is left alone, so a label that contains the characters stroke-width stays as text.
What does currentColor do?
Nothing, until you turn it on. It is off by default. When enabled, SVGO rewrites solid colors to currentColor so the icon inherits the CSS color of its parent. Gradients and other paint can change too, so check the preview before you copy the component.
What is removed before preview?
Scripts, event handlers, embedded HTML, and external URLs. The preview is a sandboxed frame and does not run the generated component. The copy and download buttons give you source code to review in your own project.
Is there a size limit?
Yes. Each SVG must be 500 KB or smaller. Larger files are rejected with an error and are not converted.
Do I need an account or an API key?
No. The converter is free, does not ask you to sign in, and does not call a paid API.