What does optimising remove?

Editor metadata, comments, hidden and empty elements, unused definitions and redundant attributes, and it rewrites paths with fewer, shorter commands and rounded numbers. The title and viewBox are kept, so the icon stays accessible and scalable.

SVG files can contain JavaScript and event handlers, which run when an SVG is opened directly or embedded inline. Icons and illustrations never need them, so they're removed by default; turn the option off only if you know the file relies on them.

What does the React output look like?

A typed TypeScript component with JSX attribute names (className, strokeWidth), styles as objects, and props spread onto the svg element, so you can set its size, colour and aria-label where you use it.

SVG optimiser and SVG to React: free, private, in your browser

How to use SVG optimiser and SVG to React

Choose an SVG file or paste its code.
Pick the number of decimal places and whether to remove scripts.
Compare the original and optimised previews and the size saved.
Copy or download the SVG, or switch to React component output.

Smaller SVGs, same picture

SVG files exported from design tools carry a lot of baggage: editor metadata, comments, hidden layers, unused definitions, default attributes and coordinates written to six decimal places. Optimising removes it, typically cutting icons and illustrations by half or more, which makes pages load faster and inline icons lighter. This tool uses SVGO, the optimiser most build tools and design systems rely on, with its safe default preset.

Choose how many decimal places coordinates keep: one makes the smallest files and is plenty for icons, three suits detailed illustrations. Repeat until no more savings runs the optimisation several times for the last few bytes. A side-by-side preview of the original and the optimised version shows they look the same before you use it, with the size before and after.

Safer SVGs

SVG is a document format that can contain JavaScript and event handlers such as onload, which run when the file is opened directly or placed inline in a page. That's a common way to smuggle scripts through image uploads. Icons and illustrations never need scripts, so they're removed by default. The previews here are drawn as images, which never run scripts, so pasting an untrusted SVG is safe.

SVG to React

Switch the output to React component to get a typed TypeScript component from the optimised SVG: attribute names become JSX (className, strokeWidth, fillRule), inline styles become objects, braces in text are escaped, and props are spread onto the svg element so you can set width, height, colour and aria-label where the icon is used. Name the component and download it as a .tsx file ready to drop into a project.

Private

Optimisation runs in your browser and nothing is uploaded, so unreleased logos and product artwork stay on your device. There is no limit on file size or how many files you optimise, and no account is needed.

Questions

What does optimising remove?: Editor metadata, comments, hidden and empty elements, unused definitions and redundant attributes, and it rewrites paths with fewer, shorter commands and rounded numbers. The title and viewBox are kept, so the icon stays accessible and scalable.
Why remove scripts?: SVG files can contain JavaScript and event handlers, which run when an SVG is opened directly or embedded inline. Icons and illustrations never need them, so they're removed by default; turn the option off only if you know the file relies on them.
What does the React output look like?: A typed TypeScript component with JSX attribute names (className, strokeWidth), styles as objects, and props spread onto the svg element, so you can set its size, colour and aria-label where you use it.