Icon | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
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 ), with as prop.
Examples
NativeBase Icons
We provide a set of commonly used interface icons which you can directly use in your project. All our icons are create using function from NativeBase.
Playground
Basic
Playground
Apart from the icons provided by , you can also create custom icons using SVG. You can use all the components from .
Custom Icon
Playground
Create Icon
Playground
Props
Icon
as
Type: any
size
The size of the icon.
Type: string | number
color
The color of the icon.
Type: 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