{"id":33096497,"url":"https://github.com/cheton/react-icons","last_synced_at":"2025-11-15T21:00:51.520Z","repository":{"id":66056625,"uuid":"111437165","full_name":"cheton/react-icons","owner":"cheton","description":":heart: svg react icons of popular icon packs","archived":false,"fork":true,"pushed_at":"2017-10-23T16:14:09.000Z","size":8907,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-13T06:23:09.765Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://gorangajic.github.io/react-icons","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"react-icons/react-icons","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cheton.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-11-20T16:45:12.000Z","updated_at":"2018-06-04T08:38:42.000Z","dependencies_parsed_at":"2023-09-26T10:16:47.627Z","dependency_job_id":null,"html_url":"https://github.com/cheton/react-icons","commit_stats":{"total_commits":128,"total_committers":18,"mean_commits":7.111111111111111,"dds":0.1875,"last_synced_commit":"07d8b62766294b235f982efba7d13e02f94bb070"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/cheton/react-icons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheton%2Freact-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheton%2Freact-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheton%2Freact-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheton%2Freact-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cheton","download_url":"https://codeload.github.com/cheton/react-icons/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheton%2Freact-icons/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":284621240,"owners_count":27036418,"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","status":"online","status_checked_at":"2025-11-15T02:00:06.050Z","response_time":57,"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":"2025-11-14T20:00:27.828Z","updated_at":"2025-11-15T21:00:51.485Z","avatar_url":"https://github.com/cheton.png","language":"JavaScript","funding_links":[],"categories":["React"],"sub_categories":["React Components"],"readme":"\n\u003cimg src=\"https://rawgit.com/gorangajic/react-icons/master/react-icons.svg\" width=\"60\" alt=\"React Icons\"\u003e\n\n## [React Icons](http://gorangajic.github.io/react-icons/index.html)\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 easly with ```react-icons```, which utilizes ES6 imports that allows you to include only the icons that your project is using.\n\n### Installation\n    npm install react-icons --save\n\n### Usage\n\n\n```javascript\nimport FaBeer from 'react-icons/lib/fa/beer';\n\nclass Question extends React.Component {\n    render() {\n        return \u003ch3\u003e Lets go for a \u003cFaBeer /\u003e? \u003c/h3\u003e\n    }\n}\n````\n\nIf you are not using es6 compiler like [babel](https://babeljs.io/) or [rollup.js](http://rollupjs.org/), it's possible to include icons from the compiled folder ```./lib```. Babel by [default](http://babeljs.io/docs/usage/require/#usage) will ignore ```node_modules``` so if you don't want to change the settings you will need to use files from ```./lib```\n\n```javascript\nvar FaBeer = require('react-icons/lib/fa/beer');\n\nvar Question = React.createClass({\n    render: function() {\n        return React.createElement('h3', null,\n            ' Lets go for a ', React.createElement(FaBeer, null), '? '\n        );\n    }\n});\n\n```\n\nYou can include icons directly from ```react-icons``` using ```import FaBeer from 'react-icons'```, but you should wait to Webpack 2 [implement](https://twitter.com/dan_abramov/status/656970508005736448) dead code elimination based on es6 imports.\n\nAlso it's possible to include the whole icon pack from:\n\n```javascript\nimport * as FontAwesome from 'react-icons/lib/fa'\n\nclass Question extends React.Component {\n    render() {\n        return \u003ch3\u003e Lets go for a \u003cFontAwesome.FaBeer /\u003e? \u003c/h3\u003e\n    }\n}\n```\n\nor import multiple icons from the same pack\n\n```javascript\nimport {MdCancel, MdChat, MdCheck} from 'react-icons/md';\n```\nevery icon pack is in their own folder\n* Material Design Icons =\u003e ./md\n* FontAwesome =\u003e ./fa\n* Typicons =\u003e ./ti\n* Github Octicons =\u003e ./go\n* Ionicons =\u003e ./io\n\nto view all icons visit [docs](http://gorangajic.github.io/react-icons/)\n\nAlso, to view and search for the necessary icons you can use the tool [Icon Viewer](https://andy-pro.github.io/icon-viewer).\n\n### Icons\n\nCurrently supported icons are:\n* Material Design Icons by Google https://www.google.com/design/icons/ (licence: [CC-BY 4.0](https://github.com/google/material-design-icons/blob/master/LICENSE))\n* Font Awesome by Dave Gandy - http://fontawesome.io (licence: [SIL OFL 1.1](http://scripts.sil.org/OFL))\n* Typicons by Stephen Hutchings - http://typicons.com (licence: [CC BY-SA](http://creativecommons.org/licenses/by-sa/3.0/))\n* Github Octicons icons by Github https://octicons.github.com/ (licence: [SIL OFL 1.1](https://github.com/github/octicons/blob/master/LICENSE.txt))\n* Ionicons by Ionic Framework - http://ionicons.com (licence: [MIT](https://github.com/driftyco/ionicons/blob/master/LICENSE))\n\nYou can add more icons by submitting pull requests or creating issues.\n\n### Configuration\nYou can configure react-icons props in context.\n\n```javascript\nclass HigherOrderComponent extends Component {\n\n    static childContextTypes = {\n        reactIconBase: PropTypes.object\n    };\n\n    getChildContext() {\n        return {\n            reactIconBase: {\n                color: 'tomato',\n                size: 24,\n                style: {\n                    ...\n                }\n            }\n        }\n    }\n\n    render() {\n        ...\n    }\n}\n```\n\nContext is overriden inline.\n\n```javascript\n\u003cIcon size={30} color='aliceblue' style={{ ... }} /\u003e\n```\n\n### Contribution\n\nJust add svg icons in ```./icons/:icons-name``` folder and create pull request again ```develop``` after merge I will generate React components because this process is not fully automated yet.\n\n### svg ?\nSvg is [supported](http://caniuse.com/#search=svg) by all major browsers.\n\n### Why es6 import and not fonts?\n\nWith ```react-icons```, you can send icons that are specified instead of one big font file to the users, helping you to recognize which icons are used in your project.\n\n### Using `create-react-app`?\n\n`create-react-app` tries to load the icons as files by default, rather than running through Babel. You may therefore see an erorr message similar to \"You may need an appropriate loader...\". The recommended workaround is to import from `lib` instead:\n\n```javascript\nimport FaBeer from 'react-icons/lib/fa/beer';\n```\n\n## Related\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/github.com%2Fcheton%2Freact-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcheton%2Freact-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheton%2Freact-icons/lists"}