How to use the SVG to JSX Converter
- Paste your SVG markup, open an
.svgfile, or click Sample. - Set the component name and options — TypeScript, props spread, removing fixed sizes or switching colours to
currentColor. - Check the sanitised preview to confirm the icon looks right.
- Copy the component or download it as a
.jsx/.tsxfile and import it in your React or Next.js project.
Why SVG needs converting for React
SVG is XML, and JSX is JavaScript that only looks like HTML. Pasting raw SVG into a React component usually produces warnings such as “Invalid DOM property stroke-width. Did you mean strokeWidth?” or a build error for namespaced attributes like xlink:href and inkscape:label. This converter rewrites the markup into valid JSX and wraps it in a component.
What gets converted
| SVG | JSX |
|---|---|
class="icon" | className="icon" |
stroke-width="2", fill-rule, stop-color | strokeWidth="2", fillRule, stopColor |
xlink:href="#a", xml:space | xlinkHref="#a", xmlSpace |
style="fill-opacity: .5; stroke-linecap: round" | style={{ fillOpacity: 0.5, strokeLinecap: 'round' }} |
data-* and aria-* | Kept as they are (React expects hyphens here) |
<?xml?>, <!DOCTYPE>, comments, <metadata>, editor attributes (Inkscape, Sodipodi, Sketch) | Removed |
onclick and other inline handlers, <script> | Removed — string handlers aren’t valid in React |
Making icons flexible
With Spread props enabled the component ends with {...props} on the <svg>, so you can pass className, width, aria-label or event handlers: <HeartIcon className="h-6 w-6" />. Remove width/height lets CSS size the icon (a viewBox is added from the old size if missing). Colours → currentColor replaces fills and strokes so the icon inherits the text colour — ideal for single-colour icon sets. The TypeScript option types props as SVGProps<SVGSVGElement>.
Accessibility
For decorative icons next to text, add aria-hidden="true". For meaningful standalone icons, keep a <title> or pass role="img" with an aria-label.
Privacy and safety
The conversion runs entirely in your browser — the SVG never leaves your device. The preview is sanitised: scripts, foreignObject, inline event handlers and external references are stripped before rendering. Building a bundle-based workflow? Tools like SVGR do the same at build time; this page is for quick one-off icons. To use an SVG as a CSS background instead, try SVG to CSS.
Tools that pair well with the SVG to JSX Converter
- HTML to Markdown — Paste HTML — or copy rich text straight from a web page, Google Doc or email — and get tidy Markdown you can drop into a README, wiki or static site.
- Image to Base64 — Turn a PNG, JPEG, SVG, WebP or GIF into a Base64 data URI with copy-ready CSS and HTML — or paste a Base64 string to preview and download the image.
- HTML Formatter — Paste minified or messy markup and get clean, consistently indented HTML — including embedded <style> and <script> blocks.
- CSS Gradient Generator — Design a gradient visually — drag colour stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback colour.
Frequently asked questions
Why does React warn “Invalid DOM property class”?
class is a reserved word in JavaScript, so React uses className. The same applies to hyphenated SVG attributes, which must be camelCased (stroke-width → strokeWidth). This tool converts them automatically.Should I use xlinkHref or href?
href attribute, and xlink:href is deprecated. React still accepts xlinkHref, so converted code keeps working; you can switch to href if you don’t support very old browsers.How do I change the icon colour with CSS?
color of its parent, so className="text-red-500" or style={{ color: "red" }} recolours it.Does the output work in Next.js and Vite?
Does it work for React Native?
react-native-svg, which uses capitalised components such as <Svg> and <Path>. The camelCased attributes from this tool are a good starting point, but rename the elements.