Icons take the name of a material icon as a prop. Use the icon directory to search for icons

> You can override Material icons with one of the following: material-community, font-awesome, octicon, ionicon, foundation, evilicon, simple-line-icon, zocial, or entypo by providing a type prop.

> Hint: use reverse to make your icon look like a button

##
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')} />

##
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.

If you are looking to implement custom icon fonts, please look at our example app here to see how to use them with React Native Elements.

##
Props

- `color`
- `containerStyle`
- `component`
- `onPress`
- `iconStyle`
- `name`
- `onLongPress`
- `raised`
- `reverse`
- `reverseColor`
- `size`
- `type`
- `underlayColor`

##
Reference

###
`name`

name of icon (required)

Type | Default
--- | ---
string | none

###
`type`

type (defaults to material, options are `material-community, zocial, font-awesome, octicon, ionicon, foundation, evilicon, simple-line-icon, feather or entypo`)

Type | Default
--- | ---
string | material

###
`size`

size of icon (optional)

Type | Default
--- | ---
number | 26

###
`color`

color of icon (optional)

Type | Default
--- | ---
string | black

###
`iconStyle`

additional styling to icon (optional)

Type | Default
--- | ---
object (style) | inherited style

###
`component`

update React Native Component (optional)

Type | Default
--- | ---
React Native component | View if no onPress method is defined, TouchableHighlight if onPress method is defined

###
`onPress`

onPress method for button (optional)

Type | Default
--- | ---
function | none

###
`onLongPress`

onLongPress method for button (optional)

Type | Default
--- | ---
function | none

###
`underlayColor`

underlayColor for press event

Type | Default
--- | ---
string | icon color

###
`reverse`

reverses color scheme (optional)

Type | Default
--- | ---
boolean | false

###
`raised`

adds box shadow to button (optional)

Type | Default
--- | ---
boolean | false

###
`containerStyle`

add styling to container holding icon (optional)

Type | Default
--- | ---
object (style) | inherited styling

###
`reverseColor`

specify reverse icon color (optional)

Type | Default
--- | ---
string | white

← Header Next →