Icon
Icons are visual indicators usually used to describe action or intent.
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:
- material
- material-community
- font-awesome
- octicon
- ionicon
- foundation
- evilicon
- simple-line-icon
- zocial
- entypo
- feather
- antdesign
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.
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
color
containerStyle
Component
disabled
disabledStyle
onPress
iconStyle
name
onLongPress
raised
reverse
reverseColor
size
type
underlayColor
Reference
name
name of icon (required)
Type | Default |
---|---|
string | none |
type
type of icon set. Supported sets here.
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 |
disabled
Disables onPress events (optional). Only works when onPress
has a handler.
Type | Default |
---|---|
boolean | false |
disabledStyle
Style for the button when disabled (optional). Only works when onPress
has a
handler.
Type | Default |
---|---|
boolean | {{ backgroundColor: '#D1D5D8' }} |
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 |