{"id":3963,"url":"https://github.com/corymsmith/react-native-icons","last_synced_at":"2026-10-19T16:38:12.284Z","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":1138,"open_issues_count":1,"forks_count":137,"subscribers_count":35,"default_branch":"master","last_synced_at":"2026-10-15T01:10:47.513Z","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":"2026-10-11T19:38:27.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,"purl":"pkg:github/corymsmith/react-native-icons","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","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corymsmith%2Freact-native-icons/sbom","scorecard":{"id":305459,"data":{"date":"2025-08-11","repo":{"name":"github.com/corymsmith/react-native-icons","commit":"43292c5c62ffb5e34604ae9e9b2f8d031c06af9a"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Code-Review","score":1,"reason":"Found 5/29 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":9,"reason":"binaries present in source code","details":["Warn: binary detected: Example/android/gradle/wrapper/gradle-wrapper.jar:1"],"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 7 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-17T21:55:29.231Z","repository_id":29559331,"created_at":"2025-08-17T21:55:29.231Z","updated_at":"2025-08-17T21:55:29.231Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":344872684,"owners_count":38361532,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-10-03T21:59:58.778Z","status":"online","status_checked_at":"2026-10-19T02:00:06.414Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2026-10-19T16:38:11.844Z","avatar_url":"https://github.com/corymsmith.png","language":"Objective-C","funding_links":[],"categories":["Components","Uncategorized","Objective-C","Other","Others","React Native [🔝](#readme)"],"sub_categories":["UI","Uncategorized","General Purpose Libraries"],"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"}