Version: 1.2.0

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#

name#

name of icon (required)

TypeDefault
stringnone

type#

type of icon set. Supported sets here.

TypeDefault
stringmaterial

size#

size of icon (optional)

TypeDefault
number26

color#

color of icon (optional)

TypeDefault
stringblack

iconStyle#

additional styling to icon (optional)

TypeDefault
object (style)inherited style

Component#

update React Native Component (optional)

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

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
boolean{{ backgroundColor: '#D1D5D8' }}

onPress#

onPress method for button (optional)

TypeDefault
functionnone

onLongPress#

onLongPress method for button (optional)

TypeDefault
functionnone

underlayColor#

underlayColor for press event

TypeDefault
stringicon color

reverse#

reverses color scheme (optional)

TypeDefault
booleanfalse

raised#

adds box shadow to button (optional)

TypeDefault
booleanfalse

containerStyle#

add styling to container holding icon (optional)

TypeDefault
object (style)inherited styling

reverseColor#

specify reverse icon color (optional)

TypeDefault
stringwhite