InfyTool
Free icons

SVG to React component

Paste or drop SVGs and get typed React, React Native, Vue or Svelte components ready to import — no build plugin needed.

SVG files or a folder — one component per file · or paste SVG code

No size limit · files are processed on your device and never uploaded · how it works

Advanced settings (optional)
Component options
Framework
Default size

Fixed width/height are removed; this becomes the default so the icon scales with text.

Options

Runs in your browser. Files are never uploaded — you can go offline after the page loads.

How to use the SVG to React

  1. Click “Choose Files” or drop your SVG files into the box above. Whole folders work too.
  2. Adjust the Advanced settings if you need to, then click “Copy”.
  3. When the row shows Done, click “Download” — or “Download all” for a ZIP.

Easy to use

Drop files, pick options, download. Whole folders at once, no signup, no daily limit.

Best quality

The same engines the professionals use — SVGO, resvg, MozJPEG, libwebp, libavif — compiled to run in your browser.

Private & secure

Files are processed on your device and never uploaded. Close the tab and nothing remains anywhere.

From SVG file to component

Paste SVG markup or drop files, pick a framework, and copy the result. For React the converter rewrites attributes to JSX (stroke-width → strokeWidth, class → className), turns inline style strings into objects, removes the XML prologue, comments and namespace attributes, replaces fixed dimensions with a default size, and spreads {...props} on the root so the component accepts className, event handlers and ARIA attributes like any other element. The component name comes from the file name in PascalCase (arrow-right.svg → ArrowRight).

Frameworks

  • React — .jsx or typed .tsx with React.SVGProps<SVGSVGElement>; optional memo() wrapper and title prop.
  • React Native — elements mapped to react-native-svg components (Svg, Path, G…) with the import statement generated.
  • Vue 3 — single-file component with v-bind="$attrs" on the root and <script setup>.
  • Svelte — component with a size prop and {...$$restProps}.

Recommended settings for UI icons

Keep currentColor on so the icon follows CSS color, keep the default size at 1em so it scales with surrounding text, and enable the title prop if the icon ever conveys meaning on its own. Optimise the SVG first with the SVG Optimizer — the component is only as small as the markup inside it. If you have dozens of icons, a sprite is often lighter than dozens of components; many teams use both.

Frequently asked questions

What does the converter change in my SVG?

For React it renames attributes to their JSX form (stroke-width → strokeWidth, class → className, xlink:href → xlinkHref), converts style="…" strings to style objects, removes the XML declaration, comments and the xmlns/version attributes, drops fixed width/height in favour of a size prop, and spreads {...props} on the root so you can pass className, onClick or aria-label. Path data and structure are untouched.

Why currentColor by default?

An icon component whose fills and strokes are currentColor takes its colour from CSS — color: on the parent, hover states, dark mode — with no extra props. That is how most icon libraries behave and it is almost always what you want for UI icons. Untick it for illustrations with a fixed palette.

Is this the same as SVGR?

It produces equivalent output for the common cases and runs entirely in your browser, which is handy when you need one component quickly or are not using a build pipeline. SVGR remains the right choice as a Webpack/Vite plugin that converts on import at build time. Both produce plain components with no runtime dependency.

How do I add accessibility?

Tick "title prop": the component accepts an optional title and renders <title> inside the SVG so screen readers announce it; without a title the icon is decorative. For React you can also pass aria-label or aria-hidden through the props spread.

SVG Sprite GeneratorOne sprite file, ready snippets SVG to CSSData URIs for background & mask SVG OptimizerShrink SVGs 40–70 % with no visual change

Your files never leave your device

Most online converters upload your file to a server. InfyTool ships the actual encoders to your browser as WebAssembly instead, so processing happens inside your tab — faster for batches, and nothing to delete afterwards.

  • No upload, ever. Turn off Wi-Fi after the page loads and every tool keeps working.
  • No limits. No file-size cap, no queue, no watermark, no account.
  • Runs on your CPU. Batches use several cores in parallel; nothing is throttled.

More free tools

Need icons or SVGs to start from?

InfyTool is built by the same team as these free libraries.

InfyIconFree SVG and PNG icons you can open directly in these tools. InfySVGFree SVG designs and illustrations, ready to optimise or convert. InfyPNGFree transparent PNG graphics for mockups and social posts.