Version: 3.2.1

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#

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.

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.

Custom Icon#

Create Icon#

Props#

Icon#

Name Type Description Default
as any Use @expo/vector-icons -
size ResponsiveValue<number | "px" | "container" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | ... 28 more ... | (string & {})> The size of the icon. -
color ResponsiveValue<(string & {}) | "contrastThreshold" | "white" | "black" | "lightText" | "darkText" | "rose.50" | "rose.100" | "rose.200" | "rose.300" | "rose.400" | "rose.500" | "rose.600" | ... 232 more ... | "dark.900"> The color of the icon. -
name string - -

Icon implements react-native-svg, View, LayoutProps, ColorProps, BorderProps, TypographyProps, ShadowProps, PositionProps, FlexProps, BackgroundProps, 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. -