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