SVG to JSX Converter

Turn SVG markup into React JSX with camelCase attributes, optional component wrapper, and copy or download — all in your browser.

Converts attributes to React camelCase (e.g. stroke-width → strokeWidth, class → className). Processing runs locally in your browser.

About SVG to JSX

Paste SVG from design tools or icon libraries and get ready-to-use React JSX. Attribute names are converted to React conventions, with optional export wrapper and xmlns stripping for inline icons.

Features

  • Convert kebab-case SVG attributes to React camelCase
  • Map class to className and common SVG attribute renames
  • Optional default export component wrapper
  • Validate SVG before conversion
  • Copy or download JSX output

How to use

  1. 1Paste your SVG markup into the input panel.
  2. 2Choose indent size and options (component wrap, strip xmlns).
  3. 3Click Convert, then copy or download the JSX.

Frequently Asked Questions

Does it work with icons from Figma or design tools?
Yes. Paste exported SVG markup directly. Complex gradients or foreignObject may need manual tweaks after conversion.
Is my SVG uploaded?
No. Conversion uses the browser DOM parser locally; nothing is sent to a server.
Can I get a React component file?
Enable “Wrap as component”, set a name like MyIcon, convert, then download a .tsx file.

Related Converters

Explore other tools