Version: 3.0.0-next.38


You can use icons in multiple ways in NativeBase:

  • Create icon by creating an SVG Icon
  • Create icon using createIcon function and use it as a component
  • Use a third-party icon library ( such as @expo/vector-icons ), with as prop.


NativeBase Icons#

We provides a set of commonly used interface icons. So you can directly use them in your project. All our icons are create using createIcon function from NativeBase.


Apart from the icons provided by @expo/vector-icon, you can also create custom icons using SVG. You can use all the components from react-native-svg.

Custom Icon#

Create Icon#



Name Type Description Default
as any Use @expo/vector-icons -
size string | number The size of the icon. -
color string The color of the icon. -
name string - -

Icon implements react-native-svg, View, BorderProps, ColorProps, BackgroundProps, FlexProps, LayoutProps, PositionProps, TypographyProps, ExtraProps, OutlineProps, ShadowProps, SafeAreaProps, TransformProps, PlatformProps


Name Type Description Default
viewBox string The viewBox of the icon. -
path Element | Element[] Path element of the icon. -
d string The path of the SVG icon. -