Quick and easy icons in React Native
Objective-C JavaScript Java Ruby
Clone or download
Latest commit 43292c5 Oct 31, 2016
Permalink
Failed to load latest commit information.
Example Adding support for spinner component on android Dec 7, 2015
android Upgrading android example project Dec 6, 2015
example/node_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit Adding support for Octicons Nov 12, 2015
fonts Adding support for Octicons Nov 12, 2015
iOS Adding support for Octicons Nov 12, 2015
ios/ReactNativeIcons/Libraries/FontAwesomeKit Adding support for Octicons Nov 12, 2015
.gitignore Initial commit w/ sample project Mar 30, 2015
.npmignore Updating npmignore file Oct 6, 2015
LICENSE Initial commit Mar 30, 2015
README.md Update README.md Nov 1, 2016
SMXIconImage.android.js Merge branch 'master' of https://github.com/corymsmith/react-native-i… Dec 6, 2015
SMXIconImage.ios.js Adding warning message when font prefix not specified Dec 6, 2015
SMXLoadingImage.android.js Adding support for spinner component on android Dec 7, 2015
SMXLoadingImage.ios.js making colors be processed by processColor, to be compatible with RN … Sep 26, 2015
SMXTabBarIOS.android.js Removing more warnings and references to React internal code Aug 3, 2015
SMXTabBarIOS.ios.js Updating to support latest versions of React Native. Fixing error rel… Oct 27, 2015
SMXTabBarIconItemIOS.android.js Removing more warnings and references to React internal code Aug 3, 2015
SMXTabBarIconItemIOS.ios.js Fix variable names Jan 26, 2016
index.android.js Adding support for spinner component on android Dec 7, 2015
index.ios.js Starting to add support for icon fonts and loading fonts dynamically … Sep 26, 2015
package.json Bumping version # Jan 24, 2016
react-native-icons.podspec Upgrading to react-native 0.4.0. Including the header search path to … Apr 20, 2015
shim-assert.js Remove dependence on invariant and shim an assert. Aug 3, 2015

README.md

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

There's far bigger 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

npm version

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

  1. In XCode, in the project navigator right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-iconsios and add ReactNativeIcons.xcodeproj
  3. Add libReactNativeIcons.a (from 'Products' under ReactNativeIcons.xcodeproj) to your project's Build PhasesLink Binary With Libraries phase
  4. 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).
  5. 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')
}
  • register module (in MainActivity.java)
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

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

Screenshot