Version: Next

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" | "full" | "sm" | "6" | "2xs" | "8" | "xs" | "12" | "md" | "16" | "xl" | "24" | "32" | "2" | "0.5" | "4" | "3" | "lg" | "1" | "2xl" | "0" | "container" | "3xs" | "1.5" | ... 29 more ... | (string & {})> The size of the icon. -
color ResponsiveValue<"gray.300" | "trueGray.400" | "gray.500" | (string & {}) | "contrastThreshold" | "white" | "black" | "lightText" | "darkText" | "coolGray.50" | "coolGray.100" | "coolGray.200" | ... 233 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. -