TSX to SVG Converter

Drop .tsx / .jsx files here or browse Up to 60 files, 2 MB each - or paste code below

Size

Colour

Stroke width (blank = component default)

Output

Animated output is only different for components that use motion.* elements.

Your code is only read, never run, and never leaves your browser.

How to Convert TSX to SVG

Add your code. Paste a React icon component, or drop one or more .tsx, .jsx, .ts or .js files into the box.

Pick the options. Keep the component's size or set your own, keep currentColor or set a colour, and choose static or animated output.

Convert. Every <svg> in the code becomes its own SVG, with a live preview and notes about anything that could not be resolved.

Download. Download or copy each SVG, or get them all as a ZIP. Use SVG to TSX for the reverse direction.

Want to tweak colours or strokes afterwards? Open the SVG in the SVG Icon Editor.

What Changes From JSX to SVG

In the component	In the SVG file
`strokeWidth={2}`	`stroke-width="2"`
`width={size}` with `size = 24`	`width="24"`
`className="icon"`	`class="icon"`
`style={{ strokeOpacity: 0.5 }}`	`style="stroke-opacity:0.5"`
`xlinkHref="#a"`	`xlink:href="#a"`
`{...props}`, `ref`, `onClick`	removed
`<motion.path animate=...>`	`<path>` + CSS keyframes

A standalone SVG always gets xmlns, a viewBox and a real width and height, so it opens in browsers, Figma and Illustrator.

Why Export Icons as SVG Files?

Design tools

Figma, Sketch and Illustrator import SVG, not React code.

Other stacks

Use the same icons in Vue, Svelte, WordPress or plain HTML.

Favicons and apps

Turn an icon into a favicon with SVG to Favicon.

Shrink the files further with Compress SVG. More format tools are in Other Converters.

Frequently Asked Questions

Paste the component code (or drop .tsx / .jsx files) and press Convert to SVG. The tool reads the JSX, fills in the prop defaults such as size = 24 and strokeWidth = 2, renames attributes like strokeWidth to stroke-width, and gives you a standalone SVG file.

Any component that returns a JSX <svg> - Heroicons, Radix, Feather, Phosphor-style and your own icons. It also reads the icon-node arrays used by Lucide (createLucideIcon) and Tabler (createReactComponent), outline and filled.

Default values from the component signature or defaultProps are used: width={size} becomes width="24", stroke={color} becomes stroke="currentColor". className becomes class, style objects become style strings, and React-only props, refs and event handlers are removed.

Anything that cannot be worked out is listed under the result, so nothing disappears silently.

Yes. One file can hold many components - each <svg> becomes its own SVG named after its component. You can also drop up to 60 files at once; three or more SVGs download together as a ZIP.

For motion.path, motion.svg and friends, the animate, initial, transition, variants and whileHover props are turned into CSS keyframes inside the SVG. Rotate, scale, x / y, opacity and pathLength (line drawing) are supported.

Pick Animated output to get that version - it needs no JavaScript. For more effects try the SVG Icon Animator.

currentColor makes the icon take the text colour of whatever it sits in, so one file works in light and dark themes. Choose Set colour if you need a fixed colour, for example for an email or a design tool.

Yes - switch to SVG to TSX. You get a typed component with size, color and strokeWidth props, camelCase attributes and {...props} passed through. Choose TSX or plain JSX.

No. The code is parsed in your browser and never sent to a server, so private design-system code stays private. The tool only reads the code - it never runs it.

Results

How to Convert TSX to SVG

What Changes From JSX to SVG

Why Export Icons as SVG Files?

Frequently Asked Questions

Guides & Tutorials