Version: 2.3.2

Icon

Icons are visual indicators usually used to describe action or intent.

Icon

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.

Usage#

import { Icon } from 'react-native-elements'
<Icon
name='rowing' />
<Icon
name='g-translate'
color='#00aced' />
<Icon
name='sc-telegram'
type='evilicon'
color='#517fa4'
/>
<Icon
reverse
name='ios-american-football'
type='ionicon'
color='#517fa4'
/>
<Icon
raised
name='heartbeat'
type='font-awesome'
color='#f50'
onPress={() => console.log('hello')} />

Props#


Reference#

brand#

Uses the brands font (FontAwesome5 only)

TypeDefault
booleanfalse

color#

color of icon (optional)

TypeDefault
stringblack

containerStyle#

add styling to container holding icon (optional)

TypeDefault
View style (object)inherited styling

disabled#

Disables onPress events (optional). Only works when onPress has a handler.

TypeDefault
booleanfalse

disabledStyle#

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

TypeDefault
View style (object){{ backgroundColor: '#D1D5D8' }}

iconStyle#

additional styling to icon (optional)

TypeDefault
View style (object)inherited style

iconProps#

provide all props from react-native Icon component

TypeDefault
{...Icon props}none

name#

name of icon (required)

TypeDefault
stringnone

onPress#

onPress method for button (optional)

TypeDefault
functionnone

onLongPress#

onLongPress method for button (optional)

TypeDefault
functionnone

raised#

adds box shadow to button (optional)

TypeDefault
booleanfalse

reverse#

reverses color scheme (optional)

TypeDefault
booleanfalse

reverseColor#

specify reverse icon color (optional)

TypeDefault
stringwhite

size#

size of icon (optional)

TypeDefault
number26

solid#

Uses the solid font (FontAwesome5 only)

TypeDefault
booleanfalse

type#

type of icon set. Supported sets here.

TypeDefault
stringmaterial

underlayColor#

underlayColor for press event

TypeDefault
stringicon color

Component#

update React Native Component (optional)

TypeDefault
React Native componentView if no onPress method is defined, TouchableHighlight if onPress method is defined