Icon
Icons are visual indicators usually used to describe action or intent. They are also used for displaying information.
Usage
Hint: use reverse to make your icon look like a button
Available Icon Sets
The icon sets in React Native Elements are made possible through react-native-vector-icons.
The current list of available icons sets are:
- antdesign
- entypo
- evilicon
- feather
- font-awesome
- font-awesome-5
- fontisto
- foundation
- ionicon
- material
- material-community
- octicon
- simple-line-icon
- zocial
To check all the supported icons, visit react-native-vector-icons directory
Custom Icon Fonts
Register your own custom icons by calling
registerCustomIconType('customid', customFont)
. Create a custom font by
following the
instructions for creating a custom font here.
Also, you can use Fontello to generate custom icon
fonts.
Props
note
Includes all Text props.
Name | Type | Default | Description |
---|---|---|---|
Component | React Component | Press handlers present then Pressable else View | Update React Native Component. |
brand | boolean | false | Uses the brands font (FontAwesome5 only). |
containerStyle | View Style | Add styling to container holding icon. | |
disabled | boolean | false | Disables onPress events. Only works when onPress has a handler. |
disabledStyle | View Style | Style for the button when disabled. Only works when onPress has a handler. | |
iconProps | IconProps | Provide all props from react-native Icon component. | |
onLongPress | GestureResponderEventHandler | Called when a long-tap gesture is detected. | |
onPress | GestureResponderEventHandler | Called when a single tap gesture is detected. | |
onPressIn | GestureResponderEventHandler | Called when a touch is engaged before onPress . | |
onPressOut | GestureResponderEventHandler | Called when a touch is released before onPress . | |
pressableProps | PressableProps except click handlers | None | |
raised | boolean | false | Adds box shadow to button. |
reverse | boolean | false | Reverses color scheme. |
reverseColor | string | Specify reverse icon color. | |
solid | boolean | false | Uses the solid font. |
type | string | material | Type of icon set. Supported sets here. |