WARNING: This library is discontinued, I highly recommend using https://github.com/oblador/react-native-vector-icons

React Native Icons

Installation

npm install react-native-icons@latest --save

npm install react-native-icons@0.4.0 --save

Getting started - iOS

Getting started - Android

...
include ':react-native-icons'
project(':react-native-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-icons/android')

...
dependencies {
 ...
 compile project(':react-native-icons')
}

import com.smixx.reactnativeicons.ReactNativeIcons; // <--- import
import java.util.Arrays; // <--- import this if you want to specify which fonts to load
import com.smixx.reactnativeicons.IconFont; // <--- import this if you want to specify which fonts to load
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
 ......
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 mReactRootView = new ReactRootView(this);
 mReactInstanceManager = ReactInstanceManager.builder()
 .setApplication(getApplication())
 .setBundleAssetName("index.android.bundle")
 .setJSMainModuleName("index.android")
 .addPackage(new MainReactPackage())
 .addPackage(new ReactNativeIcons()) // <------ add here
 .setUseDeveloperSupport(BuildConfig.DEBUG)
 .setInitialLifecycleState(LifecycleState.RESUMED)
 .build();
 mReactRootView.startReactApplication(mReactInstanceManager, "example", null);
 setContentView(mReactRootView);
 }
 ......
}

Not supported on Android yet:

Custom fonts

iOS

Android

1. Copy the font file to your apps assets directory

2. Create a myfontname.json mapping file for the font, this is used to look up the mapping file and is used

{
 "alert": "&#xf101",
 "alert-circled": "&#xf100",
 "android-add": "&#xf2c7",
 "android-add-circle": "&#xf359",
...
}

3. Include fonts

 mReactInstanceManager = ReactInstanceManager.builder()
 .setApplication(getApplication())
 .setBundleAssetName("index.android.bundle")
 .setJSMainModuleName("index.android")
 .addPackage(new MainReactPackage())
 .addPackage(new ReactNativeIcons(Arrays.asList(
 new IconFont("typicons", "typicons.ttf")
 )))
 .setUseDeveloperSupport(BuildConfig.DEBUG)
 .setInitialLifecycleState(LifecycleState.RESUMED)
 .build();

Notes

Example of icons

var { Icon, } = require('react-native-icons');
<Icon
 name='ion|beer'
 size={150}
 color='#887700'
 style={styles.beer}
/>
<Icon
 name='zocial|github'
 size={70}
 color='black'
 style={styles.github}
/>
<Icon
 name='fontawesome|facebook-square'
 size={70}
 color='#3b5998'
 style={styles.facebook}
/>
<Icon
 name='foundation|lightbulb'
 size={30}
 color='#777777'
 style={styles.lightbulb}
/>
<Icon
 name='material|face'
 size={30}
 color='#333333'
 style={styles.face}
/>

Stacked icons

<Icon
 name='fontawesome|square'
 size={80}
 color='#55acee'
 style={styles.twitterOutline}>
 <Icon
 name='fontawesome|twitter'
 size={50}
 color='#ffffff'
 style={styles.twitterIcon}/>
</Icon>

var styles = StyleSheet.create({
 twitterOutline: {
 flexDirection: 'column',
 width: 70,
 height: 70,
 alignItems: 'center'
 },
 twitterIcon: {
 flex: 1,
 width: 40,
 height: 40
 },
});

Custom tab bar

var { TabBarIOS, } = require('react-native-icons');
var TabBarItemIOS = TabBarIOS.Item;
var Example = React.createClass({
 getInitialState: function() {
 return {
 selectedTab: 'home',
 notifCount: 0,
 presses: 0,
 };
 },
 render: function () {
 return (
 <TabBarIOS
 selectedTab={this.state.selectedTab}
 tintColor={'#c1d82f'}
 barTintColor={'#000000'}
 styles={styles.tabBar}>
 <TabBarItemIOS
 name="home"
 iconName={'ion|ios-home-outline'}
 selectedIconName={'ion|ios-home'}
 title={''}
 iconSize={32}
 accessibilityLabel="Home Tab"
 selected={this.state.selectedTab === 'home'}
 onPress={() => {
 this.setState({
 selectedTab: 'home',
 });
 }}>
 {this._renderContent()}
 </TabBarItemIOS>
 <TabBarItemIOS
 name="articles"
 iconName={'ion|ios-paper-outline'}
 selectedIconName={'ion|ios-paper'}
 title={''}
 iconSize={32}
 accessibilityLabel="Articles Tab"
 selected={this.state.selectedTab === 'articles'}
 onPress={() => {
 this.setState({
 selectedTab: 'articles',
 });
 }}>
 {this._renderContent()}
 </TabBarItemIOS>
 <TabBarItemIOS
 name="messages"
 iconName={'ion|chatboxes'}
 title={''}
 iconSize={32}
 accessibilityLabel="Messages Tab"
 selected={this.state.selectedTab === 'messages'}
 onPress={() => {
 this.setState({
 selectedTab: 'messages',
 });
 }}>
 {this._renderContent()}
 </TabBarItemIOS>
 <TabBarItemIOS
 name="settings"
 iconName={'ion|ios-gear-outline'}
 selectedIconName={'ion|ios-gear'}
 title={''}
 iconSize={32}
 accessibilityLabel="Settings Tab"
 selected={this.state.selectedTab === 'settings'}
 onPress={() => {
 this.setState({
 selectedTab: 'settings',
 });
 }}>
 {this._renderContent()}
 </TabBarItemIOS>
 </TabBarIOS>
 );
 }
});

Included icon fonts