SVG to JSX
Convert SVG markup into clean React JSX or TSX components in your browser.
About this tool
About
This free SVG to JSX converter turns raw SVG markup into a clean React functional component in your browser. Get camelCase attributes, optional TypeScript types, and a ready-to-copy component—without uploading anything.
How it works
Paste or upload an SVG. The tool parses it locally, renames attributes for React (like stroke-width → strokeWidth and class → className), strips XML noise, and wraps the graphic in an exportable component with {...props} on the root svg. You can output JSX or TSX, drop fixed width/height, and map solid colors to currentColor for theming.
Steps
- Paste SVG markup or upload a .svg file (or load the sample).
- Set a component name and choose TypeScript or JavaScript.
- Toggle Remove width & height and Use currentColor if you want icon-friendly output.
- Preview the graphic and review the generated component code.
- Copy or download the .tsx / .jsx file into your React project.
Frequently asked questions
Is SVG to JSX free?
Yes. It is free to use with no signup. Convert SVGs as often as you need.
Is my SVG uploaded?
No. Parsing and conversion run entirely in your browser. Your markup is not sent to Utility Tools servers.
JSX vs TypeScript?
JavaScript outputs a plain function component. TypeScript adds an import of SVGProps and types the props argument for better autocomplete in React projects.
What does Use currentColor do?
It replaces solid fill and stroke values with currentColor so the icon inherits the surrounding text color. Values like none, transparent, and url(...) are left alone.
Why remove width and height?
Icons usually scale with CSS. Keeping viewBox and dropping fixed dimensions lets className or parent size control the display size.
What counts as valid SVG?
You need well-formed markup with an <svg> root. Unclosed tags or broken XML will show an error until fixed.
Privacy: Your SVG stays in this browser. A draft and settings may be remembered in local storage on this device. Nothing is sent to our servers.