Quick and easy icons in React Native

Overview

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 [email protected] --save

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

npm install [email protected] --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": "",
  "alert-circled": "",
  "android-add": "",
  "android-add-circle": "",
...
}

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

Issues
  • Android Support

    Android Support

    Are there any plans to add Android support?

    enhancement 
    opened by ghost 21
  • Some Errors with 0.7.1 react-native release.

    Some Errors with 0.7.1 react-native release.

    Unable to resolve module EdgeInsetsPropType from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module NativeMethodsMixin from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module NativeModules from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module ReactPropTypes from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module ImageResizeMode from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module ImageStylePropTypes from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module React from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module ReactNativeViewAttributes from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module StyleSheet from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module StyleSheetPropType from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module createReactNativeComponentClass from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module flattenStyle from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module insetsDiffer from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module invariant from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module merge from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module warning from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module deepDiffer from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module EdgeInsetsPropType from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module NativeMethodsMixin from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module NativeModules from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module ReactPropTypes from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module ImageResizeMode from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module ImageStylePropTypes from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module React from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module ReactNativeViewAttributes from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module StyleSheet from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module StyleSheetPropType from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module createReactNativeComponentClass from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module flattenStyle from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module insetsDiffer from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module invariant from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module merge from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module warning from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    Unable to resolve module deepDiffer from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-icons/FAKIconImage.ios.js
    
    opened by piyushchauhan2011 19
  • Installation instructions

    Installation instructions

    Hey @corymsmith

    For installation, I had to do step 5. (Drag ReactNativeIconsResources.bundle into the Copy Bundle Resources build phase) for both my project and the ReactNativeIcons project. Could you verify that's correct? I can do a PR to update the Readme.

    https://github.com/corymsmith/react-native-icons/blame/22dc49dd3cfa3e1fd4c0a6ec3f4c466a239fe5a5/README.md#L22

    opened by naartjie 18
  • Cannot install react-native-icons in my existing project

    Cannot install react-native-icons in my existing project

    Hello guys, I've tried to setup react-native-icons following the installation guide on github, however my build fails with some errors like (RCTRootView.h , RCTViewManager.h not found) I've also tried to clone the example and run it on my device but still errors appear when I try to build in xCode.

    Any ideas?

    Thanks in advance !

    opened by billyshena 18
  • Support changed method names of react-native >=0.10.0

    Support changed method names of react-native >=0.10.0

    See https://github.com/facebook/react-native/commit/1fb26d43191059fef3a4aacdf6385912b12e419f#diff-3e154f92c7ba4cb47e96785b9dadf3aa

    opened by michaelcontento 17
  • Can't seem to use it in Android

    Can't seem to use it in Android

    In iOS all goes fine but in Android when I run the app it shows me the error screen:

    TypeError: expected dynamic type 'boolean', but had type 'int64' (constructing arguments for RCTNetworking.sendRequest at argument index 5)
    

    screen shot 2015-12-11 at 09 20 12

    and in the logs:

    --------- beginning of /dev/log/system
    W/ReactNativeJS( 1346): 'Warning: Native component for "RCTModalHostView" does not exist'
    W/ReactNativeJS( 1346): '`ProgressBarAndroid` has no propType for native prop `AndroidProgressBar.progress` of native type `number`'
    

    The build goes I have RN 0.15 and when I tried to upgrade to 0.16 there was too much hassle regarding dependencies so I had to rollback.

    opened by nbastoWM 14
  • Build failure on Android when adding project as compile target

    Build failure on Android when adding project as compile target

    I'm getting a build error when adding react-native-icons as a compile target in my build.gradle file. I'm using react-native 0.14.2 The error:

    :app:compileDebugJavaWithJavac
    .../MainActivity.java:78: error: method onResume in class ReactInstanceManager cannot be applied to given types;
                mReactInstanceManager.onResume(this);
                                     ^
      required: Activity,DefaultHardwareBackBtnHandler
      found: MainActivity
      reason: actual and formal argument lists differ in length
    1 error
    :app:compileDebugJavaWithJavac FAILED
    
    opened by jlugner 14
  • Question: How to change color for

    Question: How to change color for "inactive" tab item?

    Hello, I couldn't find a way how to change default text color (gray) to white or anything. Background for active/inactive tab will be nice feature too. But text is really important because when I will change "barTintColor" then gray looks really bad. For active tab "tintColor" is working as expected. Styles are also not working.

    Thank you for any help.

    enhancement help wanted 
    opened by JonasJonny 13
  • Doesn't seem to install properly (missing file under ReactNativeIcons.xcodeproj)

    Doesn't seem to install properly (missing file under ReactNativeIcons.xcodeproj)

    I followed all the installation instructions provided, but after following the step to add the libReacNativeIcons.a file to my project, it shows up as red. When I look at the path for it, it's looking for a folder that doesn't exist on my system (Users/{username}/Library/Developer/Xcode/DerivedData/{project_name}-dtmkeltphoenbtbjymyjdnwscknc/Build/Products/Debug-iphoneos/libReactNativeIcons.a). I don't have a "Library" folder under my user folder. I'm guessing that's why I got a "Invariant Violation: Expected a component class, got [object Object]" error when trying to use the component. I didn't see any error when installing through npm, so I'm not sure what could have gone wrong. Any idea why the library file would be missing?

    opened by pedramsaleh 12
  • Font Icons Not Showing

    Font Icons Not Showing

    I followed through Getting Started instructions and I'm using the code from Example/index.ios.js.

    My issue is that I don't see any of the font icons rendering on the simulator.

    ios simulator screen shot jun 15 2015 9 46 12 pm

    I don't see any error messages on React Packager responses on Terminal, but I see some error messages displaying on chrome console.

    screen shot 2015-06-15 at 9 45 45 pm

    Can someone point me in the right direction to resolve this issue?

    opened by ghost 12
  • Incorrect import as of latest react native

    Incorrect import as of latest react native

    import com.facebook.react.uimanager.ReactProp;
    changed to -> import com.facebook.react.uimanager.annotations.ReactProp;

    opened by Nizam54 0
Owner
Cory Smith
Co-founder @ Bidali
Cory Smith
Easy, convenient, quick-forming PinView component.

React Native Pin View Easy, convenient, quick-forming PinView component. It runs smoothly for both IOS and Android, and has only keyboard and input. v

Talut TASGIRAN 150 Jan 8, 2022
React Native template for a quick start with React Navigation5 and TypeScript. It's cross-platform runs on Android, iOS, and the web.

对此项目的规划 出于兴趣把自己做 android、ios 开发过程中经验积累沉淀一下,此工程架构会定期更新升级依赖到最新版本,并不断的积累 App 中常用组件和基础页面功能,也会不断优化代码组织架构 此项目对以下情形会有帮助 想用前端技术做 app 开发却无从下手 想在项目中运用 typescrip

Benson 6 Aug 24, 2021
Quick React Native component for a full screen ScrollView

pagescrollview Very simple React Native / Expo ScrollView component that fills all the available area and have a working scrolling. It fixes some very

Henrique Bruno Fantauzzi de Almeida 15 Dec 7, 2021
React Native - Native Animated Icons with different states

ReactNative: Native Iconic (Android/iOS): Deprecated Due to time constraint, this library is deprecated and not maintained anymore, You can still use

Pranav Raj Singh Chauhan 224 Dec 26, 2021
Customizable Icons for React Native with support for image source and full styling.

Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project. Table of Contents Bundled Icon Sets Installation i

Joel Arvidsson 15.5k Jan 22, 2022
A simple rating library for react native supporting: decimal points, direction aware icons, custom icon set from Ionicons, custom images and record rating given by users.

React Native Rating Element A simple rating library for react native supporting: a11y ready ⚛️ decimal points like 3.7, 4.2 etc, direction aware icons

Rishabh Sharma 19 Nov 15, 2021
Credit cards and other payment icons in React Native

react-native-payment-icons There wasn't a package for displaying credit cards and other payment methods icons in React Native. Wasn't! We use SVGs tha

Henrique Bruno 9 Jan 11, 2022
icons for react-native android using android-iconify

react-native-android-iconify icons for react native android using android-iconify Installation and How to use Step 1 - NPM Install npm install --save

Layton Whiteley 32 May 26, 2020
⭐Eva Icons for React Native

react-native-eva-icons ❤️ Clean and powerful Eva Icons implementation for React Native based on react-native-svg elements. Demo Installation npm i rea

Artur Yorsh 168 Dec 26, 2021
A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.

Eva Icons Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. Additionally, Eva Icons supports 4

Akveo 8.1k Jan 18, 2022
With React-Icomoon you can easily use the icons you have selected or created in icomoon.

React-IcoMoon ?? Zero Dependencies With React-Icomoon you can easily use the icons you have selected or created in icomoon. Demo Install npm install r

Aykut Kardaş 94 Jan 13, 2022
A native and easy to use toast plugin for react-native

react-native-toast-native React Native Toast is a toast component for both Android and iOS. it uses scalessec/Toast for iOS; Demo: Getting started $ n

null 98 Nov 24, 2021
An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using the Tenor and/or the Giphy API

react-native-gif-search An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using

null 27 Jan 9, 2022
:metal: A super duper easy hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more

react-native-hero ?? A super duper hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more. Why not

Brandon Him 244 Dec 29, 2021
A theme friendly, easy to use react-native toast component built using styled-components and styled-system.

react-native-styled-toast Themeable react-native toast component built using styled-components & styled-system. Features Pure JS implementation Suppor

Jean Verster 238 Jan 17, 2022
A react-native dropdown component easy to customize for both iOS and Android.

react-native-element-dropdown react-native-element-dropdown A react-native dropdown component easy to customize for both iOS and Android. Getting star

Hoà Phan 86 Jan 10, 2022
Simple and easy to use TextArea for React Native.

Installation Add the dependency: React Native npm i @freakycoder/react-native-text-area Peer Dependencies IMPORTANT! You need install them Zero Depend

FreakyCoder 20 Dec 6, 2021
Easy React Native Layout & Grid for the Dumb

React Native Easy Grid ?? This is NOT-JUST-ANOTHER-GRID-LAYOUT library! We are trying to simplify flexbox with easier approach. Installation npm insta

GeekyAnts 2.1k Jan 13, 2022
Easy, cross-platform credit-card input for your React Native Project! Start accepting payment 💰 in your app today!

React Native Credit Card Input Easy (and good looking) credit-card input for your React Native Project ?? ?? Code: <CreditCardInput onChange={this._on

Sam Aryasa 1.3k Jan 10, 2022