SVG to JSX
Paste an SVG, clean it, preview it, then copy React-ready JSX — private and client-side.
or paste markup below
Preview
Reserved box — no layout jump.
Turn on strip background / currentColor when you need a clean icon for Tailwind. Nothing is uploaded.
How to convert SVG to JSX
- Paste SVG markup or upload a .svg file.
- Optionally strip background, apply currentColor, or strip IDs.
- Keep JSX selected, check the preview, then Copy.
React-ready icons from design exports
Design tools often export HTML-style attributes that React rejects — class, stroke-width, and similar. This page opens on JSX output so you can paste into a component without rewriting attributes by hand, with a live preview to catch broken paths before you commit.
Want size classes and currentColor for Tailwind? Use SVG to Tailwind. CSS masks and all modes live on the SVG converter hub.
FAQ
What does SVG to JSX change?
It cleans the markup and rewrites attributes for React (for example class → className, and camelCase presentation attrs) so you can paste into a component.
Is my SVG uploaded?
No. Parsing, cleaning, and preview all run in your browser.
Can I get Tailwind classes instead?
Yes — switch the output tab to Tailwind, or open the SVG to Tailwind page which starts on that mode.
Does it strip IDs and background rectangles?
Optionally. Use Strip IDs when you want reusable icons without colliding clipPath IDs, and strip background when exporters add a full-bleed rect you don’t need.
Can I paste the result into a Next.js or Vite React app?
Yes. Output is standard JSX with React-friendly attributes. Drop it into a component or wrap it in a function that returns the SVG element.