Icon

Icons are visual indicators usually used to describe action or intent. They are also used for displaying information.

Import

import { Icon } from '@rn-vui/themed';

Theme Key

Icon

Usage

Hint: use reverse to make your icon look like a button

Available Icon Sets

The icon sets in React Native Elements are now powered by modular icon packages from react-native-vector-icons. The original react-native-vector-icons library has been deprecated, and we now use individual packages for each icon set to reduce bundle size and improve performance.

To use an icon set, you need to install the corresponding package:

• antdesign - @react-native-vector-icons/ant-design
• entypo - @react-native-vector-icons/entypo
• evilicon - @react-native-vector-icons/evil-icons
• feather - @react-native-vector-icons/feather
• font-awesome - @react-native-vector-icons/fontawesome
• font-awesome-5 - @react-native-vector-icons/fontawesome5
• font-awesome-6 - @react-native-vector-icons/fontawesome6
• fontisto - @react-native-vector-icons/fontisto
• foundation - @react-native-vector-icons/foundation
• ionicon - @react-native-vector-icons/ionicons
• material - @react-native-vector-icons/material-icons
• material-community - @react-native-vector-icons/material-design-icons (use material-design as type)
• octicon - @react-native-vector-icons/octicons
• simple-line-icon - @react-native-vector-icons/simple-line-icons
• zocial - @react-native-vector-icons/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.
testID	string	RNE__ICON__CONTAINER	Test ID of icon.
type	IconType	material	Type of icon set. Supported sets here.

Playground

Loading...