100% Client-Side & Private — Your SVGs never leave your browser. No server, no uploads, no data collection.
Recent
Output
Name
SVG Input
Optimize
Pro
Original —
Optimized —
Saved —
Live Preview
Color

Paste an SVG to see the preview

Generated Code 
// Paste SVG or click a sample to generate component code
Copy as
Bulk Conversion Free: up to 10 files

Drop multiple SVG files here or click to browse

Each file converts to its own component · Free: up to 10 files · Pro: unlimited
⚡

Instant Conversion

React JSX/TSX, Vue 3 SFC, and React Native — all from the same SVG. No build step.

🔒

100% Private

All processing happens in your browser. Your SVGs never reach any server.

🎨

SVGO Optimization

currentColor theming, attribute cleanup, and size reduction — with live before/after stats.

✦

Pro Features

Bulk ZIP export, Storybook stories, index.ts generation, advanced SVGO. One-time $8.

Best Practices: SVG Icons in React

1. The currentColor pattern

Replace all hardcoded fill/stroke values with currentColor to inherit from the parent's CSS color. This makes icons trivially themeable.

2. forwardRef for design systems

Wrap with React.forwardRef so consumers can attach refs for tooltips, popover anchors, and focus management without wrapper divs.

3. Accessibility

Decorative icons (beside a text label) should have aria-hidden="true". Semantic icons (sole button content) need aria-label.

4. React Native differences

RN uses react-native-svg with PascalCase elements (Svg, Path, Circle). This converter handles the transformation automatically.