import useBaseUrl from '@docusaurus/useBaseUrl'; import Props from './props/icon.md'

Icons are visual indicators usually used to describe action or intent.

<img alt="Icon" src="https://raw.gitcode.com/aasd23/rntpc_react-native-elements/files/main/website/docs/{useBaseUrl("'img/icons.png')} />

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:

• antdesign
• entypo
• evilicon
• feather
• font-awesome
• font-awesome-5
• fontisto
• foundation
• ionicon
• material
• material-community
• octicon
• simple-line-icon
• zocial

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.

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

---

---