{"id":3963,"url":"https://github.com/corymsmith/react-native-icons","last_synced_at":"2025-05-15T09:03:19.667Z","repository":{"id":29559331,"uuid":"33098622","full_name":"corymsmith/react-native-icons","owner":"corymsmith","description":"Quick and easy icons in React Native","archived":false,"fork":false,"pushed_at":"2018-10-01T08:50:33.000Z","size":850,"stargazers_count":1142,"open_issues_count":1,"forks_count":138,"subscribers_count":36,"default_branch":"master","last_synced_at":"2025-04-07T03:15:37.225Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/corymsmith.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-30T02:14:43.000Z","updated_at":"2024-12-17T11:17:42.000Z","dependencies_parsed_at":"2022-08-31T00:50:56.603Z","dependency_job_id":null,"html_url":"https://github.com/corymsmith/react-native-icons","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corymsmith%2Freact-native-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corymsmith%2Freact-native-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corymsmith%2Freact-native-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corymsmith%2Freact-native-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/corymsmith","download_url":"https://codeload.github.com/corymsmith/react-native-icons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248890440,"owners_count":21178430,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:16:56.693Z","updated_at":"2025-04-14T13:45:05.797Z","avatar_url":"https://github.com/corymsmith.png","language":"Objective-C","funding_links":[],"categories":["Components","Uncategorized","Objective-C","Others","React Native [🔝](#readme)"],"sub_categories":["UI","Uncategorized"],"readme":"## WARNING: This library is discontinued, I highly recommend using https://github.com/oblador/react-native-vector-icons \n\nThere'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.\n\n## React Native Icons\n\n[![npm version](https://badge.fury.io/js/react-native-icons@2x.png)](http://badge.fury.io/js/react-native-icons)\n\nIncludes **5** different icon fonts and **2,444** icons.\n\n## Installation\n\n```bash\nnpm install react-native-icons@latest --save\n```\n\nIf you need to support React Native version **\u003c 0.12.0-rc** use:\n \n ```bash\n npm install react-native-icons@0.4.0 --save\n ```\n \n Note that 0.4.0 does not support Android.\n\n## Getting started - iOS\n\n1. In XCode, in the project navigator right click `Libraries` ➜ `Add Files to [your project's name]`\n2. Go to `node_modules` ➜ `react-native-icons`➜ `ios` and add `ReactNativeIcons.xcodeproj` \n3. Add `libReactNativeIcons.a` (from 'Products' under ReactNativeIcons.xcodeproj) to [your project's](http://www.runscriptbuildphase.com/images/Xcode_6_01.png) `Build Phases` ➜ `Link Binary With Libraries` phase\n4. 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`).\n5. Run your project (`Cmd+R`)\n\n\n## Getting started - Android\n\n* In `android/setting.gradle`\n\n```gradle\n...\ninclude ':react-native-icons'\nproject(':react-native-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-icons/android')\n```\n\n* In `android/app/build.gradle`\n\n```gradle\n...\ndependencies {\n    ...\n    compile project(':react-native-icons')\n}\n```\n\n* register module (in MainActivity.java)\n\n```java\nimport com.smixx.reactnativeicons.ReactNativeIcons;  // \u003c--- import\nimport java.util.Arrays; // \u003c--- import this if you want to specify which fonts to load\nimport com.smixx.reactnativeicons.IconFont; // \u003c--- import this if you want to specify which fonts to load\n\npublic class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {\n  ......\n\n  @Override\n  protected void onCreate(Bundle savedInstanceState) {\n    super.onCreate(savedInstanceState);\n    mReactRootView = new ReactRootView(this);\n\n    mReactInstanceManager = ReactInstanceManager.builder()\n      .setApplication(getApplication())\n      .setBundleAssetName(\"index.android.bundle\")\n      .setJSMainModuleName(\"index.android\")\n      .addPackage(new MainReactPackage())\n      .addPackage(new ReactNativeIcons())              // \u003c------ add here\n      .setUseDeveloperSupport(BuildConfig.DEBUG)\n      .setInitialLifecycleState(LifecycleState.RESUMED)\n      .build();\n\n    mReactRootView.startReactApplication(mReactInstanceManager, \"example\", null);\n\n    setContentView(mReactRootView);\n  }\n\n  ......\n\n}\n```\n\n* 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`\n\n## Not supported on Android yet:\n- Tab Bar\n- Stacked Icons\n\n### Custom fonts\n\n## iOS\n\nCustom fonts are not yet supported for iOS\n\n## Android\n### 1. Copy the font file to your apps assets directory\n### 2. Create a myfontname.json mapping file for the font, this is used to look up the mapping file and is used \n Create json file (newiconfont.json) that contains a map of css names to HTML encoded unicode characters., examples in /fonts directory\n ```js\n {\n   \"alert\": \"\u0026#xf101\",\n   \"alert-circled\": \"\u0026#xf100\",\n   \"android-add\": \"\u0026#xf2c7\",\n   \"android-add-circle\": \"\u0026#xf359\",\n ...\n }\n ```\n### 3. Include fonts\n\n2. Copy font file and .json file to your apps assets directory\n3.) 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.\n\n```java\n mReactInstanceManager = ReactInstanceManager.builder()\n                .setApplication(getApplication())\n                .setBundleAssetName(\"index.android.bundle\")\n                .setJSMainModuleName(\"index.android\")\n                .addPackage(new MainReactPackage())\n                .addPackage(new ReactNativeIcons(Arrays.asList(\n                        new IconFont(\"typicons\", \"typicons.ttf\")\n                )))\n                .setUseDeveloperSupport(BuildConfig.DEBUG)\n                .setInitialLifecycleState(LifecycleState.RESUMED)\n                .build();\n\n```\n\n\n## Notes\n\n- You only need to include the icon font files you want to use \n- Icon style must set a width and height, or the icon will not be visible\n- You may need to restart your node server for the icon font files to be included.\n- An icon has a name, size, and a color (optional)\n- Color can be provide via the color property or via a style \n\n## Example of icons\n\n```js\nvar { Icon, } = require('react-native-icons');\n\n\n\u003cIcon\n  name='ion|beer'\n  size={150}\n  color='#887700'\n  style={styles.beer}\n/\u003e\n\u003cIcon\n  name='zocial|github'\n  size={70}\n  color='black'\n  style={styles.github}\n/\u003e\n\u003cIcon\n  name='fontawesome|facebook-square'\n  size={70}\n  color='#3b5998'\n  style={styles.facebook}\n/\u003e\n\u003cIcon\n  name='foundation|lightbulb'\n  size={30}\n  color='#777777'\n  style={styles.lightbulb}\n/\u003e\n\n\u003cIcon\n  name='material|face'\n  size={30}\n  color='#333333'\n  style={styles.face}\n/\u003e\n\n```\n\n## Stacked icons\n\n```js\n\u003cIcon\n  name='fontawesome|square'\n  size={80}\n  color='#55acee'\n  style={styles.twitterOutline}\u003e\n  \u003cIcon\n    name='fontawesome|twitter'\n    size={50}\n    color='#ffffff'\n    style={styles.twitterIcon}/\u003e\n\u003c/Icon\u003e\n```\n\nWith the following styles to center them:\n\n```js\nvar styles = StyleSheet.create({\n  twitterOutline: {\n    flexDirection: 'column',\n    width: 70,\n    height: 70,\n    alignItems: 'center'\n  },\n  twitterIcon: {\n    flex: 1,\n    width: 40,\n    height: 40\n  },\n});\n```\n\n## Custom tab bar\n\n```js\n\nvar { TabBarIOS, } = require('react-native-icons');\nvar TabBarItemIOS = TabBarIOS.Item;\n\nvar Example = React.createClass({\n  getInitialState: function() {\n    return {\n      selectedTab: 'home',\n      notifCount: 0,\n      presses: 0,\n    };\n  },\n  render: function () {\n    return (\n      \u003cTabBarIOS\n        selectedTab={this.state.selectedTab}\n        tintColor={'#c1d82f'}\n        barTintColor={'#000000'}\n        styles={styles.tabBar}\u003e\n        \u003cTabBarItemIOS\n          name=\"home\"\n          iconName={'ion|ios-home-outline'}\n          selectedIconName={'ion|ios-home'}\n          title={''}\n          iconSize={32}\n          accessibilityLabel=\"Home Tab\"\n          selected={this.state.selectedTab === 'home'}\n          onPress={() =\u003e {\n            this.setState({\n              selectedTab: 'home',\n            });\n          }}\u003e\n          {this._renderContent()}\n        \u003c/TabBarItemIOS\u003e\n        \u003cTabBarItemIOS\n            name=\"articles\"\n            iconName={'ion|ios-paper-outline'}\n            selectedIconName={'ion|ios-paper'}\n            title={''}\n            iconSize={32}\n            accessibilityLabel=\"Articles Tab\"\n            selected={this.state.selectedTab === 'articles'}\n            onPress={() =\u003e {\n            this.setState({\n              selectedTab: 'articles',\n            });\n          }}\u003e\n          {this._renderContent()}\n        \u003c/TabBarItemIOS\u003e\n        \u003cTabBarItemIOS\n            name=\"messages\"\n            iconName={'ion|chatboxes'}\n            title={''}\n            iconSize={32}\n            accessibilityLabel=\"Messages Tab\"\n            selected={this.state.selectedTab === 'messages'}\n            onPress={() =\u003e {\n            this.setState({\n              selectedTab: 'messages',\n            });\n          }}\u003e\n          {this._renderContent()}\n        \u003c/TabBarItemIOS\u003e\n        \u003cTabBarItemIOS\n            name=\"settings\"\n            iconName={'ion|ios-gear-outline'}\n            selectedIconName={'ion|ios-gear'}\n            title={''}\n            iconSize={32}\n            accessibilityLabel=\"Settings Tab\"\n            selected={this.state.selectedTab === 'settings'}\n            onPress={() =\u003e {\n            this.setState({\n              selectedTab: 'settings',\n            });\n          }}\u003e\n          {this._renderContent()}\n        \u003c/TabBarItemIOS\u003e\n      \u003c/TabBarIOS\u003e\n    );\n  }\n});\n```\n\n**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.\n\n\n# Included icon fonts\n- [FontAwesome 4.4](http://fortawesome.github.io/Font-Awesome/) Contains **585** icons\n- [ionicons 2.0.0](http://ionicons.com/) Contains **733** icons, lots of iOS 7 style outlined icons.\n- [Foundation icons](http://zurb.com/playground/foundation-icon-fonts-3) Contains **283** icons.\n- [Zocial](http://zocial.smcllns.com/) Contains **99** social icons.\n- [Material design icons](http://zavoloklom.github.io/material-design-iconic-font/icons.html) Contains **777** icons. [View the Cheatsheet](http://zavoloklom.github.io/material-design-iconic-font/cheatsheet.html)\n\n![Screenshot](https://dl.dropboxusercontent.com/u/6721696/stacked-demo.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorymsmith%2Freact-native-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcorymsmith%2Freact-native-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorymsmith%2Freact-native-icons/lists"}