1 · Add SVGs
Or paste SVG code
2 · Options
3 · Optimized
From SVG file to React component
Pasting raw SVG into JSX breaks in small ways: class has to become className, stroke-width becomes strokeWidth, and inline styles need to be objects. The converter handles all of that, and optimizes the SVG with SVGO first so the component carries no editor clutter.
Each component is a plain function that passes props such as className, width or aria-label through to the <svg>. Choose JavaScript or TypeScript, copy it, or download every file as a zip.
For single-color icons, turn on Use currentColor so the icon takes the text color around it, and set it with CSS like any text.
Questions
Does it work with Next.js and Vite?
Yes. The output is a standard function component with no dependencies beyond React.
Are my files uploaded?
No. SVGO and the conversion run in your browser, inside this page.