SVG to React converter
Turn SVG files into React components you can paste into your project. TypeScript or JavaScript, with size and title props.
Drop SVG files or a folder hereFiles stay on your device
No files yet
Converted files appear here. Drop SVG files above, or try it with sample icons.
How to convert SVG to React
- Drop your SVG filesAdd files, a folder, or paste SVG code.
- Choose TypeScript or JavaScriptSet the default size and whether one-color icons follow the text color.
- Copy or downloadCopy a component, or download every file with an index as one ZIP.
More free tools
All tools- SVG to PNGSharp PNGs at any size, one file or hundreds.
- PNG to SVGTrace a PNG or JPG into a clean vector.
- PNG to ICOFavicon .ico files with 16 to 256 px inside.
- Favicon & app iconsWebsite, Chrome, iOS and Android sets.
- SVG to ReactTyped JSX components, ready to paste.
- SVG optimizerSmaller SVG files with nothing visible lost.
- SVG spriteMany icons in one sprite.svg file.
- Sticker makerWhatsApp and Telegram sticker files.
Questions
What does the component look like?
One function per icon that returns the SVG as JSX. It takes size, title and any SVG prop, such as className or onClick.
How do I change the icon color?
One-color icons use currentColor, so they take the text color around them. Set it with CSS or a color prop.
Does it work with Next.js?
Yes. The components are plain React with no dependencies, so they work in Next.js, Vite and Remix.
What happens to gradients and ids?
Ids are made unique with React’s useId, so several icons with gradients can sit on one page without clashing.