How to add SVG using React Native SVG

In React Native, incorporating SVGs is more complex compared to web development. Unlike the web, where SVGs can be used directly or inserted into HTML files, React Native does not have built-in support for rendering SVGs.

Therefore, we need to use the library to render SVGs. For this purpose, we use react-native-svg library, which enables developers to incorporate SVG into their React Native applications easily.

Installing dependencies

We'll need to install a few packages using npm, so make sure that your React Native application is built before we proceed.

You can see here how to create a React Native application.

Navigate to the root directory of your React Native project and install the dependencies using the following commands.

cd newProject
npm i react-native-svg
npm i --save-dev react-native-svg-transformer
Downloading dependencies

Rendering SVG shapes

Let's see how react-native-svg helps to render SVGs in your application.

{
  "name": "awesomeproject",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/webpack-config": "^18.0.1",
    "expo": "~48.0.18",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.8",
    "react-native-svg": "^13.10.0",
    "react-native-svg-uri": "^1.2.3",
    "react-native-web": "~0.18.10"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "react-native-svg-transformer": "^1.0.0"
  },
  "private": true
}

  • Lines 8–10: The Svg component creates an SVG element. It has attributes like height, width, and viewBox that define its dimensions and coordinate system,

    • Line 9: Circle component is used to create a circle element. It has attributes like cx (center x-coordinate), cy (center y-coordinate), and r (radius) that define its position and size. Other attributes like stroke, strokeWidth, and fill define its appearance.

You will observe a rendered SVG on your web browser, displaying a circle that is colored blue.

SVG rendered using react-native-svg
SVG rendered using react-native-svg

Rendering SVG images

Until now, we have learned how to create and display our SVG. In this example, we will see how to display an SVG image in React Native by importing it from our local files.

You need to follow these steps to render your local SVG file in React Native application:

  1. Place your SVG file in the project directory or within a specific folder, such as assets or images. In this case, we have placed it in assets.

  2. Import the necessary components and other required modules in your React Native component file:

import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import SVG from '/path/to/your/svg/file.svg'

  1. Use the <Image> component to render the SVG file within your component's render method:

  <Image source={SVG}/>
Adding path to your svg file

  1. Save the changes, and the SVG file should be successfully imported and rendered in your React Native application.

Example

Imagine the following SVG named 'educative.svg' that needs to be displayed in a React Native application:

Here is a complete code:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="344px" height="80px" viewBox="-0.5 -0.5 344 80" content="&lt;mxfile host=&quot;embed.diagrams.net&quot; modified=&quot;2023-07-12T11:04:16.467Z&quot; agent=&quot;Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36&quot; version=&quot;21.6.2&quot; etag=&quot;EP8RJI5hbbNHE4Z-Vozi&quot; type=&quot;embed&quot;&gt;&lt;diagram id=&quot;NIoj6pK1W2nAIdNBslks&quot; name=&quot;Page-1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><image x="-0.5" y="-0.5" width="343.33" height="80" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMDMgMjQiIGhlaWdodD0iMjQiIHdpZHRoPSIxMDMiPiYjeGE7ICA8cGF0aCBmaWxsPSIjNTU1M0ZGIiBkPSJNNS44IDMuNmMtMSAwLTEuOC44LTEuOCAydjkuMWMwIDEuMS44IDIgMS44IDJIMTZjLjIgMCAuNCAwIC42LjJsMy41IDIuNVY1LjZjMC0xLjItLjgtMi0xLjgtMkg1LjhaTTIgNS42YzAtMi4yIDEuNy00IDMuOC00aDEyLjRjMi4xIDAgMy44IDEuOCAzLjggNHYxNS44YTEgMSAwIDAgMS0xLjYuOGwtNC44LTMuNUg1LjhhMy45IDMuOSAwIDAgMS0zLjgtNFY1LjZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPiYjeGE7ICA8cGF0aCBmaWxsPSIjNTU1M0ZGIiBkPSJtOCA2LjIgMy40IDMuM2EuOS45IDAgMCAxIDAgMS4zbC0zLjggMy4zLTEuMS0xLjQgMy0yLjYtMi44LTIuNiAxLjItMS4zWiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4mI3hhOyAgPHBhdGggZmlsbD0iIzAwMCIgZD0iTTMyIDEzLjljMC0uNi4yLTEuMS41LTEuNi40LS40LjgtLjggMS40LTEgLjYtLjMgMS4zLS40IDIuMS0uNGE5LjMgOS4zIDAgMCAxIDIuNS40di0uNmEyIDIgMCAwIDAtLjYtMS42Yy0uNC0uMy0xLS41LTEuNy0uNS0uNiAwLTEgMC0xLjUuMy0uNS4xLTEgLjQtMS41LjdsLS43LTEuMyAxLjktMSAyLS4yYzEuMiAwIDIuMi4zIDMgMSAuNy42IDEgMS42IDEgMi44djMuNWwuMS41LjUuMXYxLjZhNC4zIDQuMyAwIDAgMS0uOS4xYy0uNCAwLS43IDAtMS0uMy0uMi0uMi0uMy0uNC0uMy0uN3YtLjVhNC42IDQuNiAwIDAgMS0zLjUgMS43Yy0uNyAwLTEuMi0uMi0xLjctLjVhMyAzIDAgMCAxLTEuMi0xYy0uMy0uNS0uNC0xLS40LTEuNVptNiAuNi4zLS41LjItLjR2LTEuMWwtMS4xLS4zLTEuMS0uMWMtLjcgMC0xLjMuMS0xLjguNC0uNC4zLS42LjctLjYgMS4yYTEuNiAxLjYgMCAwIDAgLjggMS40Yy4zLjIuNy4zIDEuMS4zYTMuMSAzLjEgMCAwIDAgMi4yLTFaTTUxLjMgMTYuNmgtMnYtNS4yYzAtMS0uMS0xLjYtLjQtMi0uMy0uNC0uNy0uNi0xLjMtLjYtLjQgMC0uNy4xLTEuMS4zbC0xIC44LS43IDEuMXY1LjZoLTJWNy4yaDEuOHYyYy4zLS41LjYtLjkgMS0xLjJhNC41IDQuNSAwIDAgMSAyLjktMWMuNSAwIDEgLjIgMS40LjQuMy4yLjYuNC44LjhsLjUgMS4ydjcuMlpNNTcgMTYuOGMtLjkgMC0xLjYtLjEtMi4zLS40LS43LS4yLTEuMy0uNi0xLjgtMS4xbC43LTEuNGMuNS41IDEgLjkgMS42IDEgLjYuMyAxLjEuNCAxLjcuNC41IDAgMS0uMSAxLjMtLjMuNC0uMi41LS41LjUtMSAwLS4yIDAtLjUtLjItLjZsLS44LS40LTEuMy0uMy0xLjYtLjdhMi4xIDIuMSAwIDAgMS0xLjQtMmMwLS43LjEtMS4yLjUtMS42YTMgMyAwIDAgMSAxLjMtMWMuNS0uMiAxLjItLjMgMS45LS4zczEuMyAwIDEuOS4zYTQgNCAwIDAgMSAxLjUgMWwtLjggMS4zYy0uNC0uNC0uOS0uNy0xLjMtLjlhMy42IDMuNiAwIDAgMC0yLjItLjFjLS4zIDAtLjUuMS0uNy4zLS4yLjItLjMuNC0uMy43IDAgLjMuMS41LjMuN2wuNi4zIDEgLjQgMiAuN2MuNS4yLjkuNCAxLjEuOC4zLjMuNS43LjUgMS4zIDAgMS0uNCAxLjYtMSAyLjItLjcuNS0xLjYuNy0yLjguN1pNNzQgNy4yaDEuOWwtNCA5LjRoLTEuN2wtMS43LTQuMi0xLjcgNC4yaC0xLjdsLTQtOS40aDJsMyA3LjUgMS4zLTMuNS0xLjYtNGgxLjdsMSAzIDEtM2gxLjdsLTEuNiA0IDEuNCAzLjUgMy03LjVaTTgyLjIgMTYuOGgtMmE1IDUgMCAwIDEtMy0yIDUuMSA1LjEgMCAwIDEtLjctNC4zIDQuNyA0LjcgMCAwIDEgMy43LTMuM2MxLS4yIDEuOS0uMSAyLjYuMi44LjMgMS41LjcgMiAxLjRhNC45IDQuOSAwIDAgMSAxLjIgMi45bC03LjQgMS41Yy4xLjUuNCAxIC43IDEuMy40LjQuOC42IDEuMy44aDEuM2EzIDMgMCAwIDAgMS40LS43Yy40LS4zLjctLjcuOC0xLjJsMS43LjJjMCAuNC0uMyAxLS42IDEuNGE0LjcgNC43IDAgMCAxLTMgMS44Wm0tNC00LjkgNS43LTEuMWMtLjItLjYtLjQtMS0uOC0xLjMtLjMtLjQtLjctLjYtMS4yLS44LS40LS4xLTEtLjItMS40IDAtLjUgMC0xIC4zLTEuMy42bC0uOCAxLjFhMyAzIDAgMCAwLS4xIDEuNVpNOTQgOS4yYy0uOCAwLTEuNS4yLTIgLjUtLjcuMy0xIC44LTEuMyAxLjRWMTdoLTJWNy41aDEuOHYyYy4zLS42LjgtMSAxLjMtMS41YTMgMyAwIDAgMSAxLjctLjZoLjV2MS44Wk05OC44IDE3Yy0uOCAwLTEuNiAwLTIuMy0uMy0uNy0uMy0xLjMtLjctMS44LTEuMmwuNy0xLjNjLjYuNSAxLjEuOCAxLjcgMSAuNS4yIDEgLjMgMS42LjMuNSAwIDEgMCAxLjMtLjMuNC0uMi42LS41LjYtLjkgMC0uMy0uMS0uNS0uMy0uN2wtLjgtLjMtMS4yLS40LTEuNy0uNmMtLjUtLjMtLjgtLjUtMS0uOS0uMy0uMy0uNC0uNy0uNC0xLjIgMC0uNi4yLTEuMS41LTEuNmEzIDMgMCAwIDEgMS4zLTFjLjUtLjIgMS4yLS4zIDItLjNsMS44LjNhNCA0IDAgMCAxIDEuNiAxbC0uOSAxLjNjLS40LS40LS44LS43LTEuMy0uOGEzLjYgMy42IDAgMCAwLTIuMi0uMmMtLjMgMC0uNS4yLS43LjRsLS4yLjdjMCAuMiAwIC40LjIuNi4xLjIuMy4zLjYuNGwxLjEuNCAxLjkuNmMuNS4yLjkuNSAxLjIuOC4yLjMuNC44LjQgMS40IDAgLjktLjQgMS42LTEgMi4xLS43LjUtMS42LjgtMi43LjhaIi8+JiN4YTs8L3N2Zz4=" preserveAspectRatio="none"/></g></svg>
Rendering SVG in React Native application

In this case, we did not import react-native-svg because the provided code uses a regular Image component to render the SVG image. React Native's Image component can handle rendering SVG images without the need for react-native-svg package.

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved