{"id":25904694,"url":"https://oblador.github.io/react-native-vector-icons/","last_synced_at":"2025-03-03T05:01:38.375Z","repository":{"id":32112653,"uuid":"35685034","full_name":"oblador/react-native-vector-icons","owner":"oblador","description":"Customizable Icons for React Native with support for image source and full styling.","archived":false,"fork":false,"pushed_at":"2024-10-25T22:16:40.000Z","size":25364,"stargazers_count":17430,"open_issues_count":149,"forks_count":2122,"subscribers_count":203,"default_branch":"master","last_synced_at":"2024-10-30T06:56:03.549Z","etag":null,"topics":["icon","icon-pack","react-native","ui"],"latest_commit_sha":null,"homepage":"https://oblador.github.io/react-native-vector-icons/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"Rano1/Helix-Jump","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oblador.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/funding.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["oblador"]}},"created_at":"2015-05-15T16:38:57.000Z","updated_at":"2024-10-29T22:55:30.000Z","dependencies_parsed_at":"2023-02-16T08:15:39.050Z","dependency_job_id":"4c639845-4d26-43f9-83c5-cafad1f5e6ea","html_url":"https://github.com/oblador/react-native-vector-icons","commit_stats":{"total_commits":605,"total_committers":151,"mean_commits":4.006622516556291,"dds":0.3338842975206612,"last_synced_commit":"9152776633a488fec666bfd64205c9930c5425a4"},"previous_names":[],"tags_count":773,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-vector-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-vector-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-vector-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-vector-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oblador","download_url":"https://codeload.github.com/oblador/react-native-vector-icons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238837890,"owners_count":19539080,"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":["icon","icon-pack","react-native","ui"],"created_at":"2025-03-03T05:00:59.745Z","updated_at":"2025-03-03T05:01:38.314Z","avatar_url":"https://github.com/oblador.png","language":"JavaScript","funding_links":["https://github.com/sponsors/oblador"],"categories":["React Native Project Showcase","Further Links"],"sub_categories":["Debugging Jest tests"],"readme":"![Vector Icons for React Native](https://cloud.githubusercontent.com/assets/378279/12009887/33f4ae1c-ac8d-11e5-8666-7a87458753ee.png)\n\n[![npm](https://img.shields.io/npm/v/@react-native-vector-icons/common.svg)](https://npmjs.com/package/@react-native-vector-icons/common.svg) [![npm](https://img.shields.io/npm/dm/@react-native-vector-icons/common.svg)](https://npmjs.com/package/@react-native-vector-icons/common)\n\n# React Native Vector Icons\n\nElevate your React Native applications with the power of customizable vector\nicons. Ideal for embellishing buttons, logos, and navigation or tab bars, these\nicons seamlessly integrate into your projects. Their versatility makes\nextension and styling effortless.\n\nFor the integration of `.svg` files natively, you can explore [`react-native-vector-image`](https://github.com/oblador/react-native-vector-image).\n\n\u003e [!TIP]\n\u003e If you are still using the old single package `react-native-vector-icons` please visit \u003chttps://github.com/oblador/react-native-vector-icons/tree/10.x\u003e\n\n## Table of Contents\n\n- [Sponsorship](#sponsorship)\n- [Available Icon Sets](#available-icon-sets)\n- [Installation](#installation)\n- [Setup](#setup)\n- [Icon Component](#icon-component)\n- [Usage as PNG Image/Source Object](#usage-as-png-imagesource-object)\n- [Multi-Style Fonts](#multi-style-fonts)\n- [Custom Fonts](#custom-fonts)\n- [Animation](#animation)\n- [Dynamic icon font loading](#dynamic-icon-font-loading)\n- [Usage Examples](#usage-examples)\n- [Changelog](https://github.com/react-native-vector-icons/react-native-vector-icons/releases)\n- [License](#license)\n\n## Sponsorship\n\nShould you find this library beneficial, kindly contemplate the option of\n[sponsoring](https://github.com/sponsors/oblador).\n\n## Available Icon Sets\n\n[Explore all icons](https://oblador.github.io/react-native-vector-icons/).\n\nRNVI comes with the following supported icons. You can [search NPM](https://www.npmjs.com/search?q=keywords%3Areact-native-vector-icons-icon) for third party icons.\n\n### Actively maintained\n\n- [`AntDesign`](https://ant.design/components/icon) from Ant Group (v4.4.2 with _449_ icons)\n- [`Feather`](http://feathericons.com) created by Cole Bemis \u0026 Contributors (v4.29.2 featuring _287_ icons)\n- [`FontAwesome 6`](https://fontawesome.com/search) designed by Fonticons, Inc. (v6.7.2 featuring _2060_ free and _52663_ pro icons)\n- [`Foundation`](http://zurb.com/playground/foundation-icon-fonts-3) by ZURB, Inc. (v3.0 with _283_ icons)\n- [`Ionicons`](https://ionic.io/ionicons) crafted by Ionic (v7.4.0 containing _1356_ icons)\n- [`MaterialDesignIcons`](https://pictogrammers.com/library/mdi/) from MaterialDesignIcons.com (v7.4.47 including _7448_ icons)\n- [`Octicons`](https://primer.style/foundations/icons) designed by GitHub, Inc. (v19.15.0 with _333_ icons)\n- [`Lucide`](https://lucide.dev/) designed by Lucide, (v0.473.0 with _1548_ icons)\n\n### No longer maintained upstream\n\n- [`Entypo`](http://entypo.com) by Daniel Bruce (v1.0.1 with _411_ icons)\n- [`EvilIcons`](http://evil-icons.io) designed by Alexander Madyankin \u0026 Roman Shamin (v1.10.1 with _70_ icons)\n- [`FontAwesome`](https://fontawesome.com/v4/icons) by Fonticons, Inc. (v4.7.0 containing _785_ icons)\n- [`FontAwesome 5`](https://fontawesome.com/v5/search) from Fonticons, Inc. (v5.15.4 offering _1611_ free and _7869_ pro icons)\n- [`Fontisto`](https://github.com/kenangundogan/fontisto) created by Kenan Gündoğan (v3.0.4 featuring _617_ icons)\n- [`MaterialIcons`](https://fonts.google.com/icons?icon.set=Material+Icons) by Google, Inc. (v4.0.0 featuring _2234_ icons)\n- [`SimpleLineIcons`](https://simplelineicons.github.io/) crafted by Sabbir \u0026 Contributors (v2.5.5 with _189_ icons)\n- [`Zocial`](https://smcllns.github.io/css-social-buttons) by Sam Collins (v1.1.1 with _100_ icons)\n\n## Migration\n\nSee [MIGRATION.md](MIGRATION.md) if you are migrating from `react-native-vector-icons` to the package-per-icon-set approach.\n\n## Installation\n\n1. Install the common package\n\n   ```sh\n   npm install --save @react-native-vector-icons/common\n   ```\n\n2. Install the packages for the icons you want use\n\n   ```sh\n   npm install --save @react-native-vector-icons/fontawesome6 @react-native-vector-icons/evil-icons\n   ```\n\n3. Depending on the platform you're targeting (iOS/Android/Windows), follow the appropriate setup instructions below.\n4. If you are using one of the following fonts refer to their guides for further instructions\n\n- [FontAwesome 6](packages/fontawesome6/README.md)\n- [FontAwesome 6 Pro](packages/fontawesome6-pro/README.md)\n- [FontAwesome 5](packages/fontawesome5/README.md)\n- [FontAwesome 5 Pro](packages/fontawesome5-pro/README.md)\n- [Fontello](packages/fontello/README.md)\n- [Icomoon](packages/icomoon/README.md)\n\n## Setup\n\nPlease refer to the guide for [Expo](./docs/SETUP-EXPO.md), [React Native](./docs/SETUP-REACT-NATIVE.md) or [Web](./docs/SETUP-WEB.md) for further instructions.\n\n## `Icon` Component\n\nYou can either use one of the bundled icons above or roll your own custom font.\n\n```js\nimport Icon from '@react-native-vector-icons/fontawesome';\nconst myIcon = \u003cIcon name=\"rocket\" size={30} color=\"#900\" /\u003e;\n```\n\n### Props\n\nAny [Text props](https://reactnative.dev/docs/text.html#props) and the following:\n\n| Prop        | Description                                                             | Default     |\n| ----------- | ----------------------------------------------------------------------- | ----------- |\n| **`size`**  | Size of the icon, can also be passed as `fontSize` in the style object. | `12`        |\n| **`name`**  | What icon to show, see Icon Explorer app or one of the links above.     | _None_      |\n| **`color`** | Color of the icon.                                                      | _Inherited_ |\n\n### Static Methods\n\n| Prop                     | Description                                                                                                                                                                               |\n| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **`getImageSource`**     | Returns a promise that resolving to the source of a bitmap version of the icon for use with `Image` component et al. Usage: `const source = await Icon.getImageSource(name, size, color)` |\n| **`getImageSourceSync`** | Same as `getImageSource` but synchronous. Usage: `const source = Icon.getImageSourceSync(name, size, color)`                                                                              |\n\n### Styling\n\nSince `Icon` builds on top of the `Text` component, most [style properties](https://reactnative.dev/docs/style.html) will work as expected, you might find it useful to play around with these:\n\n- `backgroundColor`\n- `borderWidth`\n- `borderColor`\n- `borderRadius`\n- `padding`\n- `margin`\n- `color`\n- `fontSize`\n\nBy combining some of these you can create for example :\n\n![type](https://cloud.githubusercontent.com/assets/378279/7667570/33817554-fc0d-11e4-9ad7-4eb60139cfb7.png)\n![star](https://cloud.githubusercontent.com/assets/378279/7667569/3010dd7e-fc0d-11e4-9696-cb721fe8e98d.png)\n\n## Usage as PNG Image/Source Object\n\nConvenient way to plug this in into other components that rely on bitmap images rather than scalable vector icons. Takes the arguments `name`, `size` and `color` as described above.\n\n```jsx\nconst source = Icon.getImageSourceSync('user', 20, 'red');\nreturn \u003cImage source={source} /\u003e;\n);\n```\n\nAlternatively you may use the async method `Icon.getImageSource`.\n\nKeep in mind that `Icon.getImageSourceSync` is blocking and might incur performance penalties. Subsequent calls will use cache however.\n\n## Multi-Style Fonts\n\nSome fonts today use multiple styles, FontAwesome 5 for example, which is supported by this library. The usage is pretty much the same as the standard `Icon` component:\n\n```jsx\nimport Icon from '@react-native-vector-icons/fontawesome5';\n\nconst myIcon1 = \u003cIcon name=\"comments\" size={30} color=\"#900\" /\u003e; // Defaults to solid\nconst myIcon2 = \u003cIcon name=\"comments\" size={30} color=\"#900\" iconType=\"solid\" /\u003e;\nconst myIcon3 = \u003cIcon name=\"comments\" size={30} color=\"#900\" iconType=\"light\" /\u003e; // Only in FA5 Pro\n```\n\n### Static methods\n\nAll static methods from `Icon` is supported by multi-styled fonts.\n\n| Prop                     | Description                                                                                                                                                                               |\n| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **`getImageSource`**     | Returns a promise that resolving to the source of a bitmap version of the icon for use with `Image` component et al. Usage: `const source = await Icon.getImageSource(name, size, color)` |\n| **`getImageSourceSync`** | Same as `getImageSource` but synchronous. Usage: `const source = Icon.getImageSourceSync(name, size, color)`                                                                              |\n\n## Custom Fonts\n\nThe best approach is to use our icon generator to create your own icon package.\n\nSee [CREATE_FONT_PACKAGE.md](./docs/CREATE_FONT_PACKAGE.md) to learn how to create your own font packages.\n\nYou can also use `createIconSet()` directly in your project. This\nreturns your own custom font based on the `glyphMap` where the key is the icon\nname and the value is either a UTF-8 character or it's character code.\n`postScriptName` is the name of the postscript font. Open the font in \u003chttps://fontdrop.info/\u003e,\nFont Book.app or similar to learn the name. Also pass the `fontFileName` argument for Android support.\n\n```js\nimport { createIconSet } from '@react-native-vector-icons/common';\nconst glyphMap = { 'icon-name': 1234, test: '∆' };\n\n// use createIconSet() with object parameter\n// or use positional parameters for compatibility with version \u003c= 10: `createIconSet(glyphMap, fontFamily[, fontFile])`\nconst Icon = createIconSet(glyphMap, {\n   postScriptName: 'FontName',\n   fontFileName: 'font-name.ttf',\n   fontSource: require('../fonts/font-name.ttf') // optional, for dynamic loading. Can also be a local file uri.\n})\n```\n\nYou should place the font ttf file into `rnvi-fonts`. You can customise this location by adding the following snippet to your package.json\n\n```json\n{\n  \"reactNativeVectorIcons\": {\n    \"fontDir\": \"src/assets/fonts\"\n  }\n}\n  ```\n\n## Animation\n\nReact Native comes with an amazing animation library called\n[`Animated`](https://reactnative.dev/docs/animated.html). To use it with an\nicon, simply create an animated component with this line: `const AnimatedIcon =\nAnimated.createAnimatedComponent(Icon)`. You can also use the higher level\nanimation library\n[react-native-animatable](https://github.com/oblador/react-native-animatable).\n\n## Dynamic icon font loading\n\n\u003e At the moment, dynamic loading is supported on native platforms (not on web) only if you use Expo. In the future, it should become available for all React Native projects via React Native core.\n\nFonts can be available in an app statically (since build time) or loaded dynamically at runtime. The latter can be useful e.g. for apps that use over-the-air updates and want to load new fonts with an update, or when you need to use a font from a remote location.\n\nDynamic loading in react-native-vector-icons is currently limited to those fonts that are bundled within the provided packages: it doesn't support Pro fonts (such as FontAwesome 5 Pro). However, loading of custom fonts is not difficult to implement: see any of the free font packages for reference.\n\nBy default, dynamic loading is enabled if supported by the version of Expo that you're using. It doesn't change the way you work with the package: If rendering an icon requires a font that is not known to the app, it will be loaded automatically and icon will render as expected.\n\n`@react-native-vector-icons/common` exports several functions which you can use to control dynamic loading:\n\n- `isDynamicLoadingEnabled`: Returns whether dynamic loading is enabled.\n- `isDynamicLoadingSupported`: Returns whether dynamic loading is supported by your runtime (checks that necessary Expo features are present).\n- `setDynamicLoadingEnabled`: Enables or disables dynamic loading.\n- `setDynamicLoadingErrorCallback`: Sets a callback that is called (in the unlikely case) when an error occurs during dynamic loading. An example of when an error might happen is loading a misconfigured OTA update which doesn't include a necessary font file.\n\n## Usage Examples\n\n### Icon Explorer\n\nTry the `IconExplorer` project in `Examples/IconExplorer` folder, there you can also search for any icon.\n\n![Screenshot of IconExplorer](https://cloud.githubusercontent.com/assets/378279/8903470/a9fe6b46-3458-11e5-901f-98b7b676d0d3.png)\n\n### Basic Example\n\n```js\nimport Icon from '@react-native-vector-icons/ionicons';\n\nfunction ExampleView(props) {\n  return \u003cIcon name=\"ios-person\" size={30} color=\"#4F8EF7\" /\u003e;\n}\n```\n\n### Inline Icons\n\n```js\nimport { Text } from 'react-native';\nimport Icon from '@react-native-vector-icons/ionicons';\n\nfunction ExampleView(props) {\n  return (\n    \u003cText\u003e\n      Lorem \u003cIcon name=\"ios-book\" color=\"#4F8EF7\" /\u003e Ipsum\n    \u003c/Text\u003e\n  );\n}\n```\n\n## Testing\n\nWhen running tests with `jest` you will need to mock out the native code loading to prevent errors.\n\nIn `jest.config.js` add\n\n```js\n// Mock out font loading\nmoduleNameMapper: {\n  '\\\\.(ttf)$': '\u003crootDir\u003e/__mocks__/file-mock.js',\n}\n```\n\nCreate `__mocks__/file-mock.js`:\n\n```js\nmodule.exports = {};\n```\n\nCreate `__mocks__/@react-native-vector-icons/common.js`:\n\n```js\n// Mock the entire common library so there are no native module loading errors\nmodule.exports = {\n  createIconSet: () =\u003e \"icon\"\n}\n```\n\n## [Changelog](https://github.com/react-native-vector-icons/react-native-vector-icons/releases)\n\n## License\n\nThis project is licenced under the [MIT License](http://opensource.org/licenses/mit-license.html).\n\nAny bundled fonts are copyright to their respective authors and mostly under MIT or [SIL OFL](http://scripts.sil.org/OFL).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/oblador.github.io%2Freact-native-vector-icons%2F","html_url":"https://awesome.ecosyste.ms/projects/oblador.github.io%2Freact-native-vector-icons%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/oblador.github.io%2Freact-native-vector-icons%2F/lists"}