Can I pass custom props and className to the generated component?

Yes, when "Forward props" is enabled, {...props} is included on the root tag.

HomeToolsSVG to JSX

React & Next.js

SVG to React JSX & Component Converter

Transform messy raw SVGs from Figma or web assets into clean, production-ready React TSX/JSX functional icon components.

Online SVG to React JSX & Component Converter

Transform raw SVGs into clean, production-ready React / Next.js TypeScript components with zero server upload.

Component Name:

Format:

Forward props ({...props})

Live Render:

Raw SVG Input

React TSX ComponentReady to import in React & Next.js

import React from 'react';

export const CustomIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-activity" {...props}>
  <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
</svg>
);

export default CustomIcon;

CamelCase Attribute Normalization

TypeScript & JavaScript Modes

Live SVG Previewer

1-Click Component Copy

How to Use SVG to React JSX & Component Converter (Step-by-Step Guide)

No software installation required. Complete your task in 3 easy steps directly in your browser.

Paste Raw SVG

Paste any <svg> element code from Figma or source files.

Configure Component Name

Enter your preferred component name and toggle TypeScript or prop forwarding.

Copy React Component

1-click copy clean TSX code directly into your React/Next.js codebase.

How helpful was this tool?

Rated 4.9 / 5 by 3,420+ users worldwide

Share with Colleagues & Friends

Help others protect their document privacy

WhatsApp X / Twitter LinkedIn

Got Questions?

Frequently Asked Questions

Yes! All kebab-case attributes like stroke-width, fill-rule, and class are automatically normalized for React.