Turn any SVG into a React component you can paste straight into a project.
Paste an icon straight out of Figma into a React file and it won't compile. JSX looks like HTML but it's JavaScript, so stroke-width has to become strokeWidth, class has to become className, and an inline style string has to turn into an object. Miss one and the build breaks. An SVG to React converter does that rewrite for you, and this one does the rest of the job too.
We read your file with the browser's own parser rather than matching patterns in the text, so the real structure of the graphic survives. That matters more than it sounds. Gradients are linearGradient, blurs are feGaussianBlur, and a converter that lowercases those names quietly breaks every gradient and filter in your icon set. Ours keeps them exact. Then it cleans the file up, rewrites the colors if you want them to follow the text, and hands you a component with the imports and exports already written.
.svg file onto it, or click Open a file. There's a sample if you just want to see what comes out.menu icon becomes Menuicon..jsx or .tsx file named after your component.The cleanup pass is on by default and it's conservative on purpose. It strips comments, editor leftovers from Inkscape, Illustrator and Figma, and id attributes that nothing references. It flattens <g> wrappers that carry no attributes, and rounds the long decimals in path data to the precision you choose. A 24 px icon rarely needs five decimal places, and that's usually where most of the weight is. What it will not do is remove attributes that merely look redundant, because an explicit stroke-width="1" can be there to override a parent, and dropping it changes the drawing.
Two other things happen if you leave the defaults on. Dropping the fixed width and height makes the icon size from CSS, and if the graphic had no viewBox we work one out from the size we just removed, so it still scales instead of collapsing. Following the text color swaps hardcoded colors for currentColor in attributes and inside inline styles, while leaving gradients, patterns, none and transparent exactly where they are.
Most people arrive here with an icon set and a deadline. These are the jobs it handles well.
react-native-svg components with only the imports that graphic actually uses.React.SVGProps<SVGSVGElement>, so you get autocompletion instead of a red squiggle.title and titleId props and wires up aria-labelledby, which is what a screen reader needs when the icon carries meaning on its own.Working with SVG more generally? The SVG Optimizer shrinks a file without converting it, the SVG to Data URI Converter inlines one into CSS, and the SVG Viewer just shows you what you've got. Or browse all our free developer tools.
Because JSX is JavaScript wearing an HTML costume. Hyphenated attribute names like stroke-width aren't valid JavaScript property names, and class is a reserved word, so React expects strokeWidth and className instead. Inline styles are the other trap. In HTML a style is a string, in JSX it has to be an object with camelCased keys. This tool handles all three, plus the namespaced names such as xlink:href.
Yes, and it shows you the numbers. The output pane reports the original size, the size after cleanup, and the percentage saved. Savings come from removing comments, editor metadata, unreferenced id attributes and empty groups, and from rounding path decimals to the precision you pick. Set that to 1 or 0 on a simple icon and the path data often halves. If you'd rather keep the file untouched, turn the cleanup off.
It replaces hardcoded colors with the keyword currentColor, which tells the SVG to paint itself in whatever text color it inherits. Put that icon inside a button and it turns white on hover, or light in dark mode, without you writing a second rule. We only swap real colors. A fill that points at a gradient with url(#id), or one set to none, is left alone, because rewriting those would flatten your artwork.
An SVG needs either a size or a viewBox to know how to draw itself, so removing the size from a file that has no viewBox leaves nothing to scale from. We work a viewBox out of the size we remove, which rescues most icons. The exception is a graphic sized in percentages, since there's no real measurement to convert. When that happens the tool tells you there's no viewBox, and the fix is to add one in your design tool.
Forwarding a ref wraps the component in React.forwardRef and puts ref={ref} on the <svg>, which a parent needs to measure the icon, focus it, or anchor a tooltip to it. React.memo skips a re-render when the props haven't changed, which is worth having for an icon repeated down a long list. Both set a displayName, so the component shows up under its own name in React DevTools instead of as ForwardRef.
Yes. Markup that isn't well-formed XML, with unclosed tags or entities like in it, gets read with the browser's HTML parser instead, and the tool tells you when it did that. Spellings such as linearGradient and viewBox are still restored correctly, and an <svg> buried in surrounding markup is found and converted on its own.
React Native has no DOM, so the elements come from react-native-svg instead. A path becomes Path, a linearGradient becomes LinearGradient, and the import line lists only the components your graphic uses. Anything React Native has no equivalent for, such as an embedded <style> block, gets left out and mentioned in the notice under the editors. CSS class names go too, since there's nothing to match them against.
No. The whole conversion runs in your browser in JavaScript. Nothing is sent to a server, nothing is stored, and the page keeps working offline once it has loaded, so proprietary artwork stays on your machine.