WARNING: Support for this library is being discontinued, I highly recommend using https://github.com/oblador/react-native-vector-icons instead as its more fully featured.

There's far biggger problems to solve in the open source and React Native communities than competing icon libraries so I'll be focusing on pushing forward other initiatives.

React Native Icons

Includes 5 different icon fonts and 2,444 icons.

Installation

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

If you need to support React Native version < 0.12.0-rc use:

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

Note that 0.4.0 does not support Android.

Getting started - iOS

In XCode, in the project navigator right click Libraries ➜ Add Files to [your project's name]
Go to node_modules ➜ react-native-icons➜ ios and add ReactNativeIcons.xcodeproj
Add libReactNativeIcons.a (from 'Products' under ReactNativeIcons.xcodeproj) to your project's Build Phases ➜ Link Binary With Libraries phase
Add the font files you want to use into the Copy Bundle Resources build phase of your project (click the '+' and click 'Add Other...' then choose the font files from node_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit).
Run your project (Cmd+R)

Getting started - Android

In android/setting.gradle

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

In android/app/build.gradle

...
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);
  }
 
  ......
 
}

Copy the font files and .json files for the fonts you want to use into android/app/src/main/assets from node_modules/react-native-icons/fonts

Not supported on Android yet:

Tab Bar
Stacked Icons

Custom fonts

iOS

Custom fonts are not yet supported for 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

Create json file (newiconfont.json) that contains a map of css names to HTML encoded unicode characters., examples in /fonts directory

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

3. Include fonts

Copy font file and .json file to your apps assets directory 3.) In MainActivity.java, add the icon font, first parameter is the prefix you want to use (ex. typicons|globe), second is the filename of the font.

 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

You only need to include the icon font files you want to use
Icon style must set a width and height, or the icon will not be visible
You may need to restart your node server for the icon font files to be included.
An icon has a name, size, and a color (optional)
Color can be provide via the color property or via a style

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>

With the following styles to center them:

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>
    );
  }
});

Note: selectedIconName is optional. It defaults to iconName if not set. Also, there's another optional property named selectedIconSize, if you need to change the icon size when the tab is selected.

Included icon fonts

FontAwesome 4.4 Contains 585 icons
ionicons 2.0.0 Contains 733 icons, lots of iOS 7 style outlined icons.
Foundation icons Contains 283 icons.
Zocial Contains 99 social icons.
Material design icons Contains 777 icons. View the Cheatsheet

Screenshot

react-native-icons

WARNING: Support for this library is being discontinued, I highly recommend using https://github.com/oblador/react-native-vector-icons instead as its more fully featured.

React Native Icons

Installation

Getting started - iOS

Getting started - Android

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

3. Include fonts

Notes

Example of icons

Stacked icons

Custom tab bar

Included icon fonts

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Last publish

Collaborators

react-native-icons

WARNING: Support for this library is being discontinued, I highly recommend using https://github.com/oblador/react-native-vector-icons instead as its more fully featured.

React Native Icons

Installation

Getting started - iOS

Getting started - Android

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

3. Include fonts

Notes

Example of icons

Stacked icons

Custom tab bar

Included icon fonts

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Last publish

Collaborators

Weekly Downloads