Skip to content
Devtoolry
Sign InJoin for Free

SVG to JSX

Convert SVG to JSX or a React component online: attributes are camelCased, editor metadata is removed and props can be passed to the <svg>.

Runs in your browser · Nothing uploaded · No sign-up

Something not working, or missing a feature? Send feedback

About the SVG to JSX

The SVG to JSX Converter turns an SVG file or icon into JSX or a ready React component. Attributes such as stroke-width and fill-rule are camelCased, class becomes className, inline styles become objects, and the metadata design tools add (Illustrator comments, Inkscape and Sketch attributes) is removed.

Conversion happens in your browser, so your files and records stay private.

How to use the SVG to JSX

  1. Paste the SVG code, for example from Figma, Illustrator or an icon set.
  2. Choose Component (with a name) or plain JSX.
  3. Keep "Pass props to <svg>" on to set className, size or aria-label where you use the icon.
  4. Turn on "Remove width and height" to size the icon with CSS, then copy the code.

Examples

An icon from a design tool

Input

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 28.0 -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-check">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg>

Result

export default function CheckIcon(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="icon icon-check" {...props}>
      <circle cx="12" cy="12" r="10" />
      <path d="m9 12 2 2 4-4" />
    </svg>
  );
}

The XML declaration and the Illustrator comment are dropped.

Plain JSX

Input

<svg viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 4h16v16H4z"/></svg>

Result

<svg viewBox="0 0 24 24" width="24" height="24"><path fillRule="evenodd" clipRule="evenodd" d="M4 4h16v16H4z" /></svg>
Inkscape metadata and inline styles

Input

<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="48" height="48" viewBox="0 0 48 48"><g inkscape:label="Layer 1" style="fill:#0f62fe;stroke-width:2"><rect x="4" y="4" width="40" height="40" rx="8"/></g></svg>

Result

export default function Logo(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}><g style={{ fill: '#0f62fe', strokeWidth: '2' }}><rect x="4" y="4" width="40" height="40" rx="8" /></g></svg>
  );
}

Common mistakes

  • Duplicate ids. Gradients, masks and clip paths use ids. Two copies of the same icon on a page share them, which can break the second one. Give each icon unique ids, for example with React's useId.

Works well with the SVG to JSX

Frequently asked questions

Why pass props to the <svg>?

Then one component serves every size and colour: <CheckIcon className="size-4" aria-hidden="true" />. Props come after the original attributes, so they override them.

How do I change the icon colour with CSS?

Use fill="currentColor" or stroke="currentColor" in the SVG; the icon then takes the text colour of its parent, as in most icon sets.

Does it work for TypeScript?

Yes. For a typed component, annotate the parameter as props: React.SVGProps<SVGSVGElement>.

How is this different from SVGR?

SVGR is a build tool that converts SVG files during bundling. This converter gives you the component code once, to paste and edit, without any setup.

Related tools