How does ...props forwarding work?

The component takes `{ size, color, ...props }` and spreads `{...props}` on the SVG element. That lets you **pass any DOM attribute**: ` `. Without forwarding, props would silently vanish - you would have to modify the component every time.

Why must the component name be PascalCase?

JSX **decides what a tag is by its first letter**: lowercase = HTML element (` `, ` `), uppercase = React component (` `). If you call your component `iconCheck` (lowercase), JSX thinks it is **an HTML tag called "iconcheck"** and renders nothing. PascalCase is **mandatory by convention**.

What if the SVG has multiple colors (e.g. an illustration)?

The tool **only extracts the first or dominant color** as a prop. The rest stay inline in the component. You can then manually add more props (such as `accentColor`, `backgroundColor`) and substitute the values. Or disable "Extract color" and leave everything as it was.

Default export or named export?

**Named export** (`export const IconCheck`) is **more common in libraries** - easier to import many icons at once: `import { IconCheck, IconClose } from "./icons"`. **Default export** (`export default function`) is convenient when a file has **a single component**. For an icon library **prefer named**, for a single-purpose component **default is fine**.

What is React.FC vs a plain function?

`React.FC ` is the **functional component type**. It is the older typing approach, **somewhat controversial** (default `children` in the type, some patterns work differently). Modern code **uses a plain function** with strict prop types: `const IconCheck = ({size, color}: IconProps) => ...`. It is clearer. The tool offers both versions - **pick the plain function** unless your project has the other convention.

Can I use the generated component in Next.js?

Yes. **It works as a Server Component or a Client Component**. If the component uses no state and no events, **it can be a Server Component** (better for SEO). If you wire `onClick` on the outside, **the wrapper must be a Client Component** but the icon does not. Just drop the file into `components/icons/` and import as usual.

What if the SVG has no viewBox?

**Without `viewBox` SVG does not scale**. The component will render at a fixed size despite the `size` prop. Fix: add a viewBox manually in the SVG before converting, or edit the generated component. The `viewBox` value is "min-x min-y width height" - for a typical 24x24 icon it is `"0 0 24 24"`. The SVG optimizer flags a missing viewBox.

Can I pass className?

Yes - if you keep **forward ...props** on, you can pass `className`, `style`, any DOM prop. Example: ` ` - the color is set via Tailwind instead of the `color` prop. Remember that `currentColor` in the SVG reads the CSS `color`, so `text-green-500` (i.e. `color: green`) works.

What does "extract size" do?

It replaces hardcoded `width="24"` and `height="24"` with prop-driven values: `width={size} height={size}`. Lets you render the same component at different sizes: ` ` or ` `. Without it the **size is locked in** the SVG and you have to override it via CSS. The default is 24 (the standard icon size).

SVG to React Component - free

Why convert SVG to a React component?

Raw SVG inside a React app has a few quirks: `class` must be `className`, hyphenated attributes (`stroke-width`) become camelCase, color is hardcoded into the SVG. If you want to render the same icon in a different color, you need a second file. A different size? Another file, or a CSS override.

A React component with props handles this neatly: `<IconCheck size={20} color="red" />`. One file, any color, any size. Plus `...props` forwarding - drop in `aria-label` or `onClick` without changing the component.

Paste your SVG (Figma, Iconify, your own art), pick options (TypeScript vs JSX, named vs default export, whether you want a `color`/`size` prop) and get a ready-to-copy component. Download as `.tsx` with a correct filename or copy to clipboard.

How to use

Paste SVG code in the left panel. Can be an icon (24x24), a logo, an illustration - any SVG.
Enter a component name (PascalCase, e.g. `IconCheck`, `LogoBrand`).
Toggle options: TypeScript for a typed version, default export or named.
On the right you get the ready component. Below it a live preview with the current size and color.
Hit "Copy" to copy the code or "Download .tsx" to save the file with the right name.

When this helps

Practical use cases:

Icon library in a project. The designer exports 30 icons from Figma, you convert each one and end up with `components/icons/` full of `.tsx` files. Every icon has size/color props and is theme-aware.
Company logo. Export from Illustrator, convert, you get `<LogoBrand size={32} />` for the header, footer, social embeds.
Status icons. `<IconSuccess color="green" />`, `<IconError color="red" />` - one file, different colors per state.
Custom hero illustrations. An SVG illustration in the hero section - now a component with editable accent colors.
A replacement for lucide-react / heroicons. Sometimes you need an icon that no library ships. Convert your own.
Build-time SVG. In Next.js a component beats `<Image src="/icon.svg" />` - fewer requests, better SSR.
Prop forwarding. `<IconClose onClick={handleClose} aria-label="Close modal" />` - accessibility and interaction in one.

First shrink your SVG with the SVG optimizer. For HTML to JSX see the HTML to JSX converter.

Frequently asked

`currentColor` is a special CSS value meaning "take the value of the parent's `color`". So an icon inside `<div style={{color: "red"}}><IconCheck /></div>` will be red. It is the best default because the icon inherits styling, works with hover (`text-blue-500 hover:text-blue-700`), works with theming. If you want a fixed color, pass it explicitly: `<IconCheck color="#3b82f6" />`.

SVG to React Component