{"id":13449735,"url":"https://react-icons.github.io/react-icons/","last_synced_at":"2025-03-22T22:33:42.322Z","repository":{"id":37270465,"uuid":"44812159","full_name":"react-icons/react-icons","owner":"react-icons","description":"svg react icons of popular icon packs","archived":false,"fork":false,"pushed_at":"2025-03-11T20:33:17.000Z","size":250209,"stargazers_count":11940,"open_issues_count":203,"forks_count":767,"subscribers_count":51,"default_branch":"master","last_synced_at":"2025-03-18T00:24:55.742Z","etag":null,"topics":["icons","react","svg-icons"],"latest_commit_sha":null,"homepage":"https://react-icons.github.io/react-icons/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-icons.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":["kamijin-fanta"]}},"created_at":"2015-10-23T12:36:30.000Z","updated_at":"2025-03-17T11:41:43.000Z","dependencies_parsed_at":"2024-11-14T23:34:05.274Z","dependency_job_id":"29f27027-b28e-4bdc-8850-c3e0520d0d1a","html_url":"https://github.com/react-icons/react-icons","commit_stats":{"total_commits":555,"total_committers":102,"mean_commits":"5.4411764705882355","dds":0.5441441441441441,"last_synced_commit":"ec03540a3e6feb18bd9c84a9c53a0b15a6a73deb"},"previous_names":["gorangajic/react-icons"],"tags_count":61,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-icons%2Freact-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-icons%2Freact-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-icons%2Freact-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-icons%2Freact-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-icons","download_url":"https://codeload.github.com/react-icons/react-icons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245029284,"owners_count":20549681,"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":["icons","react","svg-icons"],"created_at":"2024-07-31T06:00:52.778Z","updated_at":"2025-03-22T22:33:41.256Z","avatar_url":"https://github.com/react-icons.png","language":"TypeScript","funding_links":["https://github.com/sponsors/kamijin-fanta"],"categories":["Contribute","Uncategorized","Resources \u0026 Credits","Icon Libraries","Helpful links","🧰 React Toolkit","UI Component","🧑‍🎨 Animation \u0026 UI Elements","Icons","Index","Packages","Icons Library","Web"],"sub_categories":["How to add a new demo","Uncategorized","Other","Icons","🍈Icons","\u003ca name=\"icon\"\u003eIcon\u003c/a\u003e","Server-rendered React"],"readme":"\u003cimg src=\"https://raw.githubusercontent.com/react-icons/react-icons/master/react-icons.svg\" width=\"120\" alt=\"React Icons\"\u003e\n\n# [React Icons](https://react-icons.github.io/react-icons)\n\n[![npm][npm-image]][npm-url]\n\n[npm-image]: https://img.shields.io/npm/v/react-icons.svg?style=flat-square\n[npm-url]: https://www.npmjs.com/package/react-icons\n\nInclude popular icons in your React projects easily with `react-icons`, which utilizes ES6 imports that allows you to include only the icons that your project is using.\n\n## Installation (for standard modern project)\n\n```bash\nyarn add react-icons\n# or\nnpm install react-icons --save\n```\n\nexample usage\n\n```jsx\nimport { FaBeer } from \"react-icons/fa\";\n\nfunction Question() {\n  return (\n    \u003ch3\u003e\n      Lets go for a \u003cFaBeer /\u003e?\n    \u003c/h3\u003e\n  );\n}\n```\n\n[View the documentation](https://react-icons.github.io/react-icons) for further usage examples and how to use icons from other packages. _NOTE_: each Icon package has it's own subfolder under `react-icons` you import from.\n\nFor example, to use an icon from **Material Design**, your import would be: `import { ICON_NAME } from 'react-icons/md';`\n\n## Installation (for meteorjs, gatsbyjs, etc)\n\n\u003e **Note**\n\u003e This option has not had a new release for some time.\n\u003e More info https://github.com/react-icons/react-icons/issues/593\n\nIf your project grows in size, this option is available.\nThis method has the trade-off that it takes a long time to install the package.\n\n```bash\nyarn add @react-icons/all-files\n# or\nnpm install @react-icons/all-files --save\n```\n\nexample usage\n\n```jsx\nimport { FaBeer } from \"@react-icons/all-files/fa/FaBeer\";\n\nfunction Question() {\n  return (\n    \u003ch3\u003e\n      Lets go for a \u003cFaBeer /\u003e?\n    \u003c/h3\u003e\n  );\n}\n```\n\n## Icons\n\n| Icon Library                                                            | License                                                                                           | Version                                  | Count |\n| ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----: |\n| [Circum Icons](https://circumicons.com/)                                | [MPL-2.0 license](https://github.com/Klarr-Agency/Circum-Icons/blob/main/LICENSE)                 | 1.0.0                                    |   288 |\n| [Font Awesome 5](https://fontawesome.com/)                              | [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)                                 | 5.15.4-3-gafecf2a                        |  1612 |\n| [Font Awesome 6](https://fontawesome.com/)                              | [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)                                 | 6.5.2                                    |  2045 |\n| [Ionicons 4](https://ionicons.com/)                                     | [MIT](https://github.com/ionic-team/ionicons/blob/master/LICENSE)                                 | 4.6.3                                    |   696 |\n| [Ionicons 5](https://ionicons.com/)                                     | [MIT](https://github.com/ionic-team/ionicons/blob/master/LICENSE)                                 | 5.5.4                                    |  1332 |\n| [Material Design icons](http://google.github.io/material-design-icons/) | [Apache License Version 2.0](https://github.com/google/material-design-icons/blob/master/LICENSE) | 4.0.0-98-g9beae745bb                     |  4341 |\n| [Typicons](http://s-ings.com/typicons/)                                 | [CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/)                                   | 2.1.2                                    |   336 |\n| [Github Octicons icons](https://octicons.github.com/)                   | [MIT](https://github.com/primer/octicons/blob/master/LICENSE)                                     | 18.3.0                                   |   264 |\n| [Feather](https://feathericons.com/)                                    | [MIT](https://github.com/feathericons/feather/blob/master/LICENSE)                                | 4.29.1                                   |   287 |\n| [Lucide](https://lucide.dev/)                                           | [ISC](https://github.com/lucide-icons/lucide/blob/main/LICENSE)                                   | v5.1.0-6-g438f572e                       |  1215 |\n| [Game Icons](https://game-icons.net/)                                   | [CC BY 3.0](https://creativecommons.org/licenses/by/3.0/)                                         | 12920d6565588f0512542a3cb0cdfd36a497f910 |  4040 |\n| [Weather Icons](https://erikflowers.github.io/weather-icons/)           | [SIL OFL 1.1](http://scripts.sil.org/OFL)                                                         | 2.0.12                                   |   219 |\n| [Devicons](https://vorillaz.github.io/devicons/)                        | [MIT](https://opensource.org/licenses/MIT)                                                        | 1.8.0                                    |   192 |\n| [Ant Design Icons](https://github.com/ant-design/ant-design-icons)      | [MIT](https://opensource.org/licenses/MIT)                                                        | 4.4.2                                    |   831 |\n| [Bootstrap Icons](https://github.com/twbs/icons)                        | [MIT](https://opensource.org/licenses/MIT)                                                        | 1.11.3                                   |  2716 |\n| [Remix Icon](https://github.com/Remix-Design/RemixIcon)                 | [Apache License Version 2.0](http://www.apache.org/licenses/)                                     | 4.2.0                                    |  2860 |\n| [Flat Color Icons](https://github.com/icons8/flat-color-icons)          | [MIT](https://opensource.org/licenses/MIT)                                                        | 1.0.2                                    |   329 |\n| [Grommet-Icons](https://github.com/grommet/grommet-icons)               | [Apache License Version 2.0](http://www.apache.org/licenses/)                                     | 4.12.1                                   |   635 |\n| [Heroicons](https://github.com/tailwindlabs/heroicons)                  | [MIT](https://opensource.org/licenses/MIT)                                                        | 1.0.6                                    |   460 |\n| [Heroicons 2](https://github.com/tailwindlabs/heroicons)                | [MIT](https://opensource.org/licenses/MIT)                                                        | 2.1.3                                    |   888 |\n| [Simple Icons](https://simpleicons.org/)                                | [CC0 1.0 Universal](https://creativecommons.org/publicdomain/zero/1.0/)                           | 12.14.0                                  |  3209 |\n| [Simple Line Icons](https://thesabbir.github.io/simple-line-icons/)     | [MIT](https://opensource.org/licenses/MIT)                                                        | 2.5.5                                    |   189 |\n| [IcoMoon Free](https://github.com/Keyamoon/IcoMoon-Free)                | [CC BY 4.0 License](https://github.com/Keyamoon/IcoMoon-Free/blob/master/License.txt)             | d006795ede82361e1bac1ee76f215cf1dc51e4ca |   491 |\n| [BoxIcons](https://github.com/atisawd/boxicons)                         | [MIT](https://github.com/atisawd/boxicons/blob/master/LICENSE)                                    | 2.1.4                                    |  1634 |\n| [css.gg](https://github.com/astrit/css.gg)                              | [MIT](https://opensource.org/licenses/MIT)                                                        | 2.1.1                                    |   704 |\n| [VS Code Icons](https://github.com/microsoft/vscode-codicons)           | [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)                                         | 0.0.35                                   |   461 |\n| [Tabler Icons](https://github.com/tabler/tabler-icons)                  | [MIT](https://opensource.org/licenses/MIT)                                                        | 3.2.0                                    |  5237 |\n| [Themify Icons](https://github.com/lykmapipo/themify-icons)             | [MIT](https://github.com/thecreation/standard-icons/blob/master/modules/themify-icons/LICENSE)    | v0.1.2-2-g9600186                        |   352 |\n| [Radix Icons](https://icons.radix-ui.com)                               | [MIT](https://github.com/radix-ui/icons/blob/master/LICENSE)                                      | @radix-ui/react-icons@1.3.0-1-g94b3fcf   |   318 |\n| [Phosphor Icons](https://github.com/phosphor-icons/core)                | [MIT](https://github.com/phosphor-icons/core/blob/main/LICENSE)                                   | 2.1.1                                    |  9072 |\n| [Icons8 Line Awesome](https://icons8.com/line-awesome)                  | [MIT](https://github.com/icons8/line-awesome/blob/master/LICENSE.md)                              | 1.3.1                                    |  1544 |\n\nYou can add more icons by submitting pull requests or creating issues.\n\n## Configuration\n\nYou can configure react-icons props using [React Context API](https://reactjs.org/docs/context.html).\n\n_Requires **React 16.3** or higher._\n\n```jsx\nimport { IconContext } from \"react-icons\";\n\n\u003cIconContext.Provider value={{ color: \"blue\", className: \"global-class-name\" }}\u003e\n  \u003cdiv\u003e\n    \u003cFaFolder /\u003e\n  \u003c/div\u003e\n\u003c/IconContext.Provider\u003e;\n```\n\n| Key         | Default               | Notes                              |\n| ----------- | --------------------- | ---------------------------------- |\n| `color`     | `undefined` (inherit) |                                    |\n| `size`      | `1em`                 |                                    |\n| `className` | `undefined`           |                                    |\n| `style`     | `undefined`           | Can overwrite size and color       |\n| `attr`      | `undefined`           | Overwritten by other attributes    |\n| `title`     | `undefined`           | Icon description for accessibility |\n\n## Migrating from version 2 -\u003e 3\n\n### Change import style\n\nImport path has changed. You need to rewrite from the old style.\n\n```jsx\n// OLD IMPORT STYLE\nimport FaBeer from \"react-icons/lib/fa/beer\";\n\nfunction Question() {\n  return (\n    \u003ch3\u003e\n      Lets go for a \u003cFaBeer /\u003e?\n    \u003c/h3\u003e\n  );\n}\n```\n\n```jsx\n// NEW IMPORT STYLE\nimport { FaBeer } from \"react-icons/fa\";\n\nfunction Question() {\n  return (\n    \u003ch3\u003e\n      Lets go for a \u003cFaBeer /\u003e?\n    \u003c/h3\u003e\n  );\n}\n```\n\nEnding up with a large JS bundle? Check out [this issue](https://github.com/react-icons/react-icons/issues/154).\n\n### Adjustment CSS\n\nFrom version 3, `vertical-align: middle` is not automatically given. Please use IconContext to specify className or specify an inline style.\n\n#### Global Inline Styling\n\n```tsx\n\u003cIconContext.Provider value={{ style: { verticalAlign: 'middle' } }}\u003e\n```\n\n#### Global `className` Styling\n\nComponent\n\n```tsx\n\u003cIconContext.Provider value={{ className: 'react-icons' }}\u003e\n```\n\nCSS\n\n```css\n.react-icons {\n  vertical-align: middle;\n}\n```\n\n### TypeScript native support\n\nDependencies on `@types/react-icons` can be deleted.\n\n#### Yarn\n\n```bash\nyarn remove @types/react-icons\n```\n\n#### NPM\n\n```bash\nnpm remove @types/react-icons\n```\n\n## Contributing\n\n`./build-script.sh` will build the whole project. See also CI scripts for more information.\n\n### Development\n\n```bash\nyarn\ncd packages/react-icons\nyarn fetch  # fetch icon sources\nyarn build\n```\n\n### Add/Update icon set\n\nFirst, check the discussion to see if anyone would like to add an icon set.\n\nhttps://github.com/react-icons/react-icons/discussions/categories/new-icon-set\n\nThe SVG files to be fetched are managed in this file. Edit this file and run `yarn fetch \u0026\u0026 yarn check \u0026\u0026 yarn build`.\n\nhttps://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/icons/index.ts\n\n### Preview\n\n\u003e **Note**\n\u003e The project is not actively accepting PR for the preview site at this time.\n\nThe preview site is the [`react-icons`](https://react-icons.github.io/react-icons/) website, built in Astro+React.\n\n```bash\ncd packages/react-icons\nyarn fetch\nyarn build\n\ncd ../preview-astro\nyarn start\n```\n\n### Demo\n\nThe demo is a [Create React App](https://create-react-app.dev/) boilerplate with `react-icons` added as a dependency for easy testing.\n\n```bash\ncd packages/react-icons\nyarn fetch\nyarn build\n\ncd ../demo\nyarn start\n```\n\n## Why React SVG components instead of fonts?\n\nSVG is [supported by all major browsers](http://caniuse.com/#search=svg). With `react-icons`, you can serve only the needed icons instead of one big font file to the users, helping you to recognize which icons are used in your project.\n\n## Related Projects\n\n- [react-svg-morph](https://github.com/gorangajic/react-svg-morph/)\n\n## Licence\n\nMIT\n\n- Icons are taken from the other projects so please check each project licences accordingly.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/react-icons.github.io%2Freact-icons%2F","html_url":"https://awesome.ecosyste.ms/projects/react-icons.github.io%2Freact-icons%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/react-icons.github.io%2Freact-icons%2F/lists"}