icon.md

id	icon
title	Icon

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

---

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