Skip to content
Icon Pantry

SVG to JSX converter

Turn any SVG into a React component or plain JSX. Attributes become camelCase, inline styles become objects, and colors can follow currentColor.

How it works

  1. Choose an SVG file or paste SVG code.
  2. Pick a component or plain JSX, in TypeScript or JavaScript.
  3. Set the name and options like currentColor and a size prop.
  4. Copy the code or download the .tsx or .jsx file.

Questions

Something else? Every tool runs in your browser, so nothing you add is uploaded.

What changes when SVG becomes JSX?

Attributes with dashes become camelCase (stroke-width to strokeWidth), class becomes className, xlink:href becomes xlinkHref, and style strings become objects. Comments, scripts and editor metadata are removed.

Can I use the component with Next.js?

Yes. The component has no hooks or browser-only code, so it works in Next.js server components, Vite, Remix and Create React App.

What does currentColor do?

It replaces fixed fill and stroke colors with currentColor, so the icon takes the text color of its parent and you can recolor it with CSS or a className.

Is my SVG uploaded?

No. The conversion runs in your browser, so your code never leaves your computer.

Is there a React icon package I can install instead?

Yes. Every Icon Pantry icon is in the free iconpantry npm package as a React component: import { Heart } from "iconpantry/react".

More free tools