Icons

Icons

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

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.

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

Icon props

prop default type description
name none string name of icon (required)
type material string type (defaults to material, options are material-community, zocial, font-awesome, octicon, ionicon, foundation, evilicon, simple-line-icon, feather or entypo)
size 26 number size of icon (optional)
color black string color of icon (optional)
iconStyle inherited style object (style) additional styling to icon (optional)
component View if no onPress method is defined, TouchableHighlight if onPress method is defined React Native component update React Native Component (optional)
onPress none function onPress method for button (optional)
onLongPress none function onLongPress method for button (optional)
underlayColor icon color string underlayColor for press event
reverse false boolean reverses color scheme (optional)
raised false boolean adds box shadow to button (optional)
containerStyle inherited styling object (style) add styling to container holding icon (optional)
reverseColor white string specify reverse icon color (optional)