Skip to main content
Version: Bleeding Edge 🚧

Icon

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

Import

import { Icon } from "@rneui/themed";

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:

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.

NameTypeDefaultDescription
ComponentReact ComponentPress handlers present then Pressable else ViewUpdate React Native Component.
brandbooleanfalseUses the brands font (FontAwesome5 only).
containerStyleView StyleAdd styling to container holding icon.
disabledbooleanfalseDisables onPress events. Only works when onPress has a handler.
disabledStyleView StyleStyle for the button when disabled. Only works when onPress has a handler.
iconPropsIconPropsProvide all props from react-native Icon component.
onLongPressGestureResponderEventHandlerCalled when a long-tap gesture is detected.
onPressGestureResponderEventHandlerCalled when a single tap gesture is detected.
onPressInGestureResponderEventHandlerCalled when a touch is engaged before onPress.
onPressOutGestureResponderEventHandlerCalled when a touch is released before onPress.
pressablePropsPressableProps except click handlersNone
raisedbooleanfalseAdds box shadow to button.
reversebooleanfalseReverses color scheme.
reverseColorstringSpecify reverse icon color.
solidbooleanfalseUses the solid font.
typestringmaterialType of icon set. Supported sets here.

Playground

Loading...