SVG to JSX

Paste an SVG file or icon and get a ready-to-use React component. Attributes are converted to camelCase, inline styles become style objects, class becomes className and editor junk is stripped. Add props spreading, icon sizing, currentColor or TypeScript with one click.

Last updated: October 24, 2026

Component name

Output Arrow function component Function component Named export (const) JSX only

Width / height Keep original Icon: 1em × 1em Remove (size with CSS)

TypeScript Spread {...props} Use currentColor Remove editor metadata React import

SVG

Sample Upload Clear

JSX

Copy Download

Convert to JSX Copy component Download SvgIcon.jsx

Advertisement

How to use the SVG to JSX

1. Paste your SVG code, drop an .svg file on the editor or press Upload.
2. Name the component; it is filled in from the file name automatically.
3. Pick the options: component style, TypeScript, props spread, size handling and currentColor.
4. Check the output, which updates as you type, and the preview of your SVG.
5. Copy or download the component as a .jsx or .tsx file and import it in your React app.

SVG attributes and their JSX names

React uses the JavaScript (DOM property) spelling of attributes. For SVG that mostly means removing hyphens and colons and capitalising the next letter. The most common conversions:

Attributes that are already camelCase in SVG, such as viewBox, preserveAspectRatio and gradientUnits, stay the same. data-* and aria-* attributes also keep their hyphens.

Using the component

Save the output as CabinIcon.jsx (or .tsx) and import it like any other component. With the props spread enabled, everything you pass lands on the <svg> element:

import CabinIcon from './CabinIcon';

<CabinIcon className="nav-icon" aria-hidden="true" />
<CabinIcon width={32} height={32} onClick={openMenu} />

For icon sets, combine Icon: 1em × 1em with Use currentColor: the icon then follows the font size and text color of wherever it is placed, so one component works in buttons, menus and headings without extra props. Keep each icon's id values unique (for gradients and clip paths), because several copies of the same inline SVG on one page share the document's id namespace.

Frequently asked questions

Related tools