SVG to React Native Converter

Turn SVG into a react-native-svg component for iOS & Android.

A free SVG to React Native converter: paste SVG markup and get a react-native-svg component that renders on iOS and Android. Each element is mapped to its PascalCase component (svg → Svg, path → Path, linearGradient → LinearGradient), attributes are camelCased, the xmlns declarations are dropped and the matching import line is generated for you. TypeScript and memo output supported. Runs fully in your browser — nothing is uploaded.

How to use SVG to React Native Converter

  1. Paste your SVG

    Drop raw SVG markup into the input box, or upload a .svg file, and this free online SVG to React Native converter parses it safely in your browser.

  2. Name the component

    Choose a component name so the generated react-native-svg component exports cleanly, ready to import into your iOS and Android screens.

  3. Toggle props spread

    Enable the spread props option to add {...props} to the Svg element, so size, colour and other props pass straight through to your native icon.

  4. Pick TypeScript output

    Turn on TypeScript to type the props with SvgProps and emit a .tsx file, with an optional React.memo wrapper for a tidy reusable component.

  5. Watch the live mapping

    The converter renames every element to its PascalCase component, turning path into Path and g into G, camelCases attributes and builds the import line.

  6. Copy or download

    Copy the react-native-svg component to your clipboard or download it as a .js or .tsx file, then drop it into your React Native app instantly.

Frequently asked questions

How do I use an SVG in React Native?

React Native doesn't render SVG markup directly — you install the react-native-svg library and rebuild the icon out of its components (<Svg>, <Path>, <Circle>…). Paste your SVG here and this tool generates that component, including the import line, ready to drop into your app.

What do I need installed?

Just react-native-svg. Add it with `npm install react-native-svg` (or `expo install react-native-svg` on Expo), then paste the generated component into a file and import it like any other component.

How are the elements renamed?

Each SVG element maps to its PascalCase react-native-svg component: svg → Svg, path → Path, g → G, rect → Rect, circle → Circle, linearGradient → LinearGradient, stop → Stop, clipPath → ClipPath, and so on. The tool collects everything you used and builds the import automatically.

Can I get a TypeScript component?

Yes. Turn on TypeScript and the props are typed with SvgProps from react-native-svg and the file is emitted as .tsx. You can also enable the {...props} spread so size and colour props pass straight through to <Svg>.

Why was an element left unmapped with a warning?

It means the SVG used an element that react-native-svg doesn't provide (for example certain filter primitives). The element is kept with a PascalCase name and flagged so you can remove it or find an alternative — the rest of the component is still valid.

Is my SVG uploaded anywhere?

No. Everything happens in your browser using the native XML parser in an inert document. Nothing you paste is sent to a server, so it's safe for private or unreleased artwork.

Related tools — Developer · React converters