Paste an SVG, get a ready-to-use component — the manual conversion step handled for you.
Runs in your browserNo sign-up required
Paste SVG Markup
Icon.jsx
How to Use This Tool
1Paste your SVG markupStraight from a design tool export, an icon library, or hand-written — the preview confirms it renders correctly.
2Pick React or VueAttribute names, the root element, and the props boilerplate are generated correctly for whichever you choose.
3Enable size and color props (optional)Turns the icon into a reusable component you can resize and recolor from wherever it's used, instead of a fixed, hardcoded SVG.
4Copy or downloadGrab the finished component file, ready to drop into your project.
Frequently Asked Questions
Why can't I just paste raw SVG into JSX directly?
You mostly can, except for the handful of attributes that don't match React's naming — `class` needs to become `className`, `stroke-width` needs to become `strokeWidth`, and so on for every kebab-case SVG attribute. Miss one and React either ignores the attribute or logs a console warning. This tool handles that conversion automatically.
What does the color prop actually do?
When enabled, every `fill` or `stroke` value in the SVG (except ones explicitly set to "none") is replaced with a `color` prop, defaulting to `currentColor`. That lets you recolor the icon from CSS wherever it's used, the same way icon libraries like Lucide or Feather work, instead of the color being baked into the file.
Does this work with complex SVGs (gradients, filters, multiple paths)?
Yes — the converter walks the actual SVG element tree (via the browser's DOMParser), not a regex pass, so nested groups, gradients, filters, and multiple child elements are all preserved and converted correctly.
Is my SVG uploaded anywhere?
No — parsing and conversion happen entirely in your browser. Nothing you paste here is ever sent to a server.
