To Add SVGs in react native you can use react-native-svg

Install:

yarn add react-native-svg

Example:

import Svg, {

  Circle,

  Ellipse,

  G,

  Text,

  TSpan,

  TextPath,

  Path,

  Polygon,

  Polyline,

  Line,

  Rect,

  Use,

  Image,

  Symbol,

  Defs,

  LinearGradient,

  RadialGradient,

  Stop,

  ClipPath,

  Pattern,

  Mask,

} from 'react-native-svg';



/* Use this if you are using Expo

import * as Svg from 'react-native-svg';

const { Circle, Rect } = Svg;

*/



import React from 'react';

import { View, StyleSheet } from 'react-native';



export default class SvgExample extends React.Component {

  render() {

    return (

      <View

        style={[

          StyleSheet.absoluteFill,

          { alignItems: 'center', justifyContent: 'center' },

        ]}

      >

        <Svg height="50%" width="50%" viewBox="0 0 100 100">

          <Circle

            cx="50"

            cy="50"

            r="45"

            stroke="blue"

            strokeWidth="2.5"

            fill="green"

          />

          <Rect

            x="15"

            y="15"

            width="70"

            height="70"

            stroke="red"

            strokeWidth="2"

            fill="yellow"

          />

        </Svg>

      </View>

    );

  }

}

Or you want to import an svg to your app use: react-native-svg-transformer

Example:

import Logo from "./logo.svg";



<Logo width={120} height={40} />

But if you want an icon library you can use : react-native-vector-icons

Also here is the directory: React Native Vector Icons directory