Free browser tool
Convert SVG to React Components Online
Convert SVG to React in your browser. Paste an icon, copy JSX or TSX, and keep the file on your device. No account is required, and nothing is uploaded.
Requires a modern browser with JavaScript enabled.
<svg class="icon" stroke-width="2"> <path d="M4 12h16" /> </svg>
<svg className="icon" strokeWidth={2}>
<path d="M4 12h16" />
</svg>SVG to React features
JSX and TSX from one panel
The same SVGR pass can print a JavaScript component or a TypeScript component with SVGProps.
Attribute names React already expects
class becomes className and stroke-width becomes strokeWidth because the file is parsed, not search-replaced.
Preview that does not run the component
The frame shows the sanitized SVG with scripts disabled. Copy and download give you source to review.
Converter
Conversion runs in your browser. AI tools send a request to /api/ai only when you press a button.
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.
Optional AI tools
Each button sends one request to /api/ai on this site. Conversion still runs in the browser. If AI is not configured, the error is shown and no component is substituted. Privacy policy.
Generate and Edit need an instruction. The instruction limit is 8 KB. SVG or component source sent from these buttons is capped at 100 KB.
How to convert SVG to React
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.
When an SVG to React component fits
Drop an icon into a React file
You have an SVG from a design tool and need a component with a name, props, and JSX attribute names.
Check a file before it joins a library
Convert one icon here, read the output, then use the batch page when the set is larger than a single file.
Leave cleanup off until you want it
Optimize and currentColor start off, so the first result is the attribute rewrite without a color or SVGO pass.
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. The attribute guide shows the pairs, and the other notes are on the guides index.
| 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;Tools
Each tool is a separate page. The guides explain attribute names, currentColor, the sanitizer, and Optimize.
SVG to JSX
JavaScript component
A JavaScript React component, with className and the other JSX attribute names.
SVG to TSX
TypeScript component
The same component typed with SVGProps, downloaded as a .tsx file.
SVG to Vue
Single-file component
A Vue single-file component. The template keeps class, stroke-width, and viewBox.
SVG to Svelte
Svelte component
A Svelte component. The markup keeps class, stroke-width, and viewBox.
SVG to React Native
react-native-svg
A component for React Native projects. It imports react-native-svg. The preview is the sanitized web SVG.
Batch ZIP
Many files, one zip
Many SVGs in, a zip of components out. Icon library mode adds an index file. The zip is built in this browser.
Optimizer
SVGO in the browser
A smaller SVG from the same SVGO preset. viewBox stays, and the file is not uploaded.
SVG to PNG
Raster export
A PNG from the sanitized SVG, with a pixel cap so a huge viewBox stays bounded.
Data URI
UTF-8 or base64
A UTF-8 or base64 data:image/svg+xml URI from the sanitized SVG, encoded in the browser.
Guides
Notes on the passes
How attributes become JSX props, what currentColor changes, what the sanitizer removes, and what Optimize keeps.
Questions
Is my SVG uploaded?
Conversion, optimization, PNG export, data URIs, Vue, Svelte, React Native, and batch zip run in your browser. Those tools do not send the SVG to a server or to analytics. Optional AI buttons on the React converter send the instruction and, when that button needs it, the SVG or the component source to this site only after you press the button. Google Analytics receives page views and, for an AI button, an aggregate result: tool name, success or failure, and format. It does not receive the SVG, the component source, the file name, or the instruction. Details are on the privacy policy: https://www.svgtoreact.com/privacy-policy/
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 and does not ask you to sign in or to paste an API key. Optional AI buttons call this site. The provider key, if one is configured on the worker, is not entered in the page.