SVG optimizer and SVG to JSX

Q: How do I turn an SVG into a React component?

Paste the SVG, then pick JSX or TSX. Attributes like stroke-width become strokeWidth , class becomes className , inline styles become style objects, and the component passes on any props you give it, like className or width .

Q: What does “Color follows text color” do?

It swaps the fills and strokes for currentColor , so the icon takes the color of the text around it. Then you can color it with CSS or a Tailwind class like text-sky-600 . Best for one-color icons.

Paste or drop an SVG to make it smaller, then copy it as clean SVG, a React component, a data URI or a CSS background. It runs in your browser, so nothing is uploaded.

Free from Darnly. Spot a bug in the app you're building? Darnly hands it to Claude Code, Codex or Cursor in one key.Add to Chrome

Drop your SVG hereor click to choose a file

Or paste SVG code

Decimals Remove width and height (size it with CSS) Color follows text color

More free tools

See all 89 tools

How it works

Drop in an SVG file, or paste its code. You can also paste SVG code you copied from Figma.
It is cleaned up straight away: editor leftovers, comments, hidden metadata and extra decimals go, and you see the size before and after with a preview of both.
Copy it the way you need it: a smaller SVG, a React component (JSX or TSX), a data URI, or a CSS background. Or copy a ready prompt for your AI agent to add it to your project.

Questions

Is my SVG uploaded anywhere?

No. The cleanup happens in your browser. Your file never leaves your computer.

How do I turn an SVG into a React component?

Paste the SVG, then pick JSX or TSX. Attributes like stroke-width become strokeWidth, class becomes className, inline styles become style objects, and the component passes on any props you give it, like className or width.

Will the optimized SVG look different?

It shouldn’t. Compare the two previews. If something looks off, raise the number of decimals: very small artwork sometimes needs 3 or 4.

What does “Color follows text color” do?

It swaps the fills and strokes for currentColor, so the icon takes the color of the text around it. Then you can color it with CSS or a Tailwind class like text-sky-600. Best for one-color icons.

Should I remove the width and height?

Turn it on for icons and logos you size with CSS. The SVG keeps its viewBox, so it scales to whatever box you put it in. Leave it off if you need the SVG to show at a fixed size on its own.

Data URI or inline SVG?

Use a data URI or CSS background for small decorative images, like a pattern or a check mark in a list. Use inline SVG or a React component when you need to color it, animate it, or make it accessible with a title.