Convert SVG to JSX without breaking React
Paste raw SVG into a React file and you'll get warnings straight away: class instead of className, stroke-width instead of strokeWidth, xlink:href, style strings and XML declarations that JSX doesn't understand. This SVG to JSX converter rewrites all of it for you, so the markup compiles cleanly in React, Next.js, Remix or Vite.
Inline style attributes are turned into presentation attributes where possible, and the rest become a proper style object. Text inside the SVG is escaped safely, and the result is wrapped in a ready-to-use function component.
SVG to React component, ready for Tailwind
Most converters keep the colours and sizes that came from the design file, so every icon ends up with a hard-coded fill="#1E40AF" and width="24". That's the opposite of what you want in a Tailwind project. Here, single-colour icons switch to currentColor and the fixed width and height are removed, so a class like size-5 text-blue-600 controls both the size and the colour.
The component passes its props through to the svg element, so you can override the default classes, add an onClick handler or set aria attributes wherever you use it. Multi-colour illustrations keep their palette unless you choose “All colours”.
Clean up Figma and Illustrator exports
Design tools add a surprising amount of noise: XML declarations, generator comments, editor namespaces, layer ids like Layer_1, empty groups and enable-background styles. None of it affects how the icon looks, so the converter removes it and shows how much smaller the cleaned SVG is.
Illustrator's habit of putting colours in a style block with classes such as .st0 is handled too: simple class rules are moved onto the shapes themselves, so the icon can switch to currentColor. Ids that a gradient, mask or clip path still needs are kept.
SVG to TSX for TypeScript projects
Choose TSX and the component is typed with SVGProps<SVGSVGElement>, so editors autocomplete every valid svg attribute and catch mistakes. Prefer plain JavaScript? Switch to JSX and the type import disappears.
Typing API data as well? Our JSON to TypeScript converter turns a JSON response into interfaces or a Zod schema the same way, in your browser.
Decorative or meaningful icons
Most icons sit next to a text label, so by default the component gets aria-hidden="true" and screen readers skip it. If an icon carries meaning on its own, such as a lone delete button, turn on “Keep title”: the title stays inside the SVG and the component gets role="img" so assistive technology announces it.
If an AI coding assistant writes your components, add a rule such as “import icons from components/icons, never inline raw SVG” to a CLAUDE.md or Cursor rules file, so new code follows the same pattern.
Private by design
Unreleased logos and product icons shouldn't sit on someone else's server. This converter uses your browser's built-in SVG parser, with no upload and no account, and the preview is drawn as an image so nothing in a pasted file can run. It's one of our free developer tools that run in your browser.