Skip to main content
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