Icon | NativeBase | Universal Components for React and React Native

Data Display
Typography
Disclosure
Media and Icons
Others
Icon
NativeBase allows you to use icons in multiples ways. They are listed below:
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 ), with as prop.
Show Code
Playground
Examples
Basic
Playground
Apart from the icons provided by , you can also create custom icons using SVG. You can use all the components from .
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 function from NativeBase.
Playground
Custom Icon
Playground
Create Icon
Playground
Integration with Third Party Icons
Playground
Props
Icon
as
Type: any
size
The size of the icon.
Type: ThemeComponentSizeType<"Icon">
color
The color of the icon.
Type: ResponsiveValue<"gray.300" | "muted.50" | "muted.800" | "text.500" | "text.400" | "text.900" | "muted.200" | "muted.300" | "muted.400" | "muted.500" | "text.50" | "text.600" | "muted.700" | ... 342 more ... | (string & {})>
name
Type: string
createIcon
viewBox
The viewBox of the icon.
Type: string
path
Path element of the icon.
Type: Element | Element[]
d
The path of the SVG icon.
Type: string
Nativebase logo
MadeWithNativeBase