Version: 3.0.3

Icon

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.

Examples#

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.

Basic#

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#

Props#

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

createIcon#

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. -