Skip to main content
Version: Next

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:

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#

Icon#

Reference#

Icon#

Component#

Update React Native Component.

TypeDefault
React Component(ios),(android),(web),TouchableNativeFeedback(

android),TouchableHighlight( default),undefined( ) | View |


backgroundColor#

Background color of the button

TypeDefault
string'#007AFF'

borderRadius#

Border radius of the button

Set to 0 to disable.

TypeDefault
number5

brand#

Uses the brands font (FontAwesome5 only).

TypeDefault
booleanfalse

color#

Text and icon color

Use iconStyle or nest a Text component if you need different colors.

TypeDefault
string'white'

containerStyle#

Add styling to container holding icon.

TypeDefault
View style(Object)None

disabled#

If true, disable all interactions for this component.

Disables onPress events. Only works when onPress has a handler.

TypeDefault
booleanfalse

disabledStyle#

Style for the button when disabled. Only works when onPress has a handler.

TypeDefault
View style(Object)None

iconProps#

Provide all props from react-native Icon component.

TypeDefault
IconPropsNone

iconStyle#

Styles applied to the icon only

Good for setting margins or a different color.

TypeDefault
TextStyle{marginRight: 10}

name#

Name of the icon to show

See Icon Explorer app

{@link https://github.com/oblador/react-native-vector-icons/tree/master/Examples/IconExplorer}

TypeDefault
stringNone

raised#

Adds box shadow to button.

TypeDefault
booleanfalse

reverse#

Reverses color scheme.

TypeDefault
booleanfalse

reverseColor#

Specify reverse icon color.

TypeDefault
stringNone

size#

Size of the icon, can also be passed as fontSize in the style object.

TypeDefault
number24

solid#

Uses the solid font.

TypeDefault
booleanfalse

style#

Style prop inherited from TextProps and TouchableWithoutFeedbackProperties

Only exist here so we can have ViewStyle or TextStyle

TypeDefault
ViewStyle or TextStyleNone

type#

Type of icon set. Supported sets here.

TypeDefault
stringmaterial