React Icons

svg react icons of popular icon packs

Icon setReact
react-icons/react-iconsreact-icons.github.io/react-icons/react-icons

README

React Icons

React Icons

[![npm][npm-image]][npm-url]

[npm-image]: https://img.shields.io/npm/v/react-icons.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/react-icons

Include 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.

Installation (for standard modern project)


  1. ``` sh
  2. yarn add react-icons
  3. # or
  4. npm install react-icons --save
  5. ```

example usage

  1. ``` js
  2. import { FaBeer } from "react-icons/fa";

  4. function Question() {
  5.   return (
  6.     <h3>
  7.       {" "}
  8.       Lets go for a <FaBeer />?{" "}
  9.     </h3>
  10.   );
  11. }
  12. ```

View the documentation for further usage examples and how to use icons from other packages. _NOTE_: each Icon package has it's own subfolder underreact-icons you import from.

For example, to use an icon from Material Design, your import would be: import { ICON_NAME } from 'react-icons/md';

Installation (for meteorjs, gatsbyjs, etc)


If your project grows in size, this option is available.
This method has the trade-off that it takes a long time to install the package.

  1. ``` sh
  2. yarn add @react-icons/all-files
  3. # or
  4. npm install @react-icons/all-files --save
  5. ```

example usage

  1. ``` js
  2. import { FaBeer } from "@react-icons/all-files/fa/FaBeer";

  4. function Question() {
  5.   return (
  6.     <h3>
  7.       {" "}
  8.       Lets go for a <FaBeer />?{" "}
  9.     </h3>
  10.   );
  11. }
  12. ```

Icons


IconLicenseVersionCount
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:
[Circum[MPL-2.0a2924cb1ee37b9fa39ef023a36f1c884b3492e9b285
[Font[CC5.15.41612
[Ionicons[MIT](https://github.com/ionic-team/ionicons/blob/master/LICENSE)4.6.3696
[Ionicons[MIT](https://github.com/ionic-team/ionicons/blob/master/LICENSE)5.5.01332
[Material[Apache4.0.0-12-g63c5cb30603650
[Typicons](http://s-ings.com/typicons/)[CC2.1.2336
[Github[MIT](https://github.com/primer/octicons/blob/master/LICENSE)8.5.0184
[Feather](https://feathericons.com/)[MIT](https://github.com/feathericons/feather/blob/master/LICENSE)4.28.0286
[Game[CC12920d6565588f0512542a3cb0cdfd36a497f9104040
[Weather[SIL2.0.12219
[Devicons](https://vorillaz.github.io/devicons/)[MIT](https://opensource.org/licenses/MIT)1.8.0192
[Ant[MIT](https://opensource.org/licenses/MIT)4.2.1789
[Bootstrap[MIT](https://opensource.org/licenses/MIT)1.5.01846
[Remix[Apache2.5.02271
[Flat[MIT](https://opensource.org/licenses/MIT)1.0.2329
[Grommet-Icons](https://github.com/grommet/grommet-icons)[Apache4.6.2615
[Heroicons](https://github.com/tailwindlabs/heroicons)[MIT](https://opensource.org/licenses/MIT)1.0.4460
[Heroicons[MIT](https://opensource.org/licenses/MIT)2.0.8530
[Simple[CC05.16.02024
[Simple[MIT](https://opensource.org/licenses/MIT)2.5.5189
[IcoMoon[CCd006795ede82361e1bac1ee76f215cf1dc51e4ca491
[BoxIcons](https://github.com/atisawd/boxicons)[CC2.0.9757
[css.gg](https://github.com/astrit/css.gg)[MIT](https://opensource.org/licenses/MIT)2.0.0704
[VS[CC0.0.23383
[Tabler[MIT](https://opensource.org/licenses/MIT)1.68.01978
[Themify[MIT](https://github.com/thecreation/standard-icons/blob/master/modules/themify-icons/LICENSE)v0.1.2352
[Radix[MIT](https://github.com/radix-ui/icons/blob/master/LICENSE)@radix-ui/react-icons@1.0.3-30-g237cd76318

You can add more icons by submitting pull requests or creating issues.

Configuration


You can configure react-icons props using React Context API.

_Requires React 16.3 or higher._

  1. ``` js
  2. import { IconContext } from "react-icons";

  4. <IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
  5.   <div>
  6.     <FaFolder />
  7.   </div>
  8. </IconContext.Provider>;
  9. ```

KeyDefaultNotes
------------------------------------------------------------------
`color``undefined`|
`size``1em`|
`className``undefined`|
`style``undefined`Can
`attr``undefined`Overwritten
`title``undefined`Icon

Migrating from version 2 -> 3


Change import style


Import path has changed. You need to rewrite from the old style.

  1. ``` js
  2. // OLD IMPORT STYLE
  3. import FaBeer from "react-icons/lib/fa/beer";

  5. function Question() {
  6.   return (
  7.     <h3>
  8.       {" "}
  9.       Lets go for a <FaBeer />?{" "}
  10.     </h3>
  11.   );
  12. }
  13. ```

  1. ``` js
  2. // NEW IMPORT STYLE
  3. import { FaBeer } from "react-icons/fa";

  5. function Question() {
  6.   return (
  7.     <h3>
  8.       {" "}
  9.       Lets go for a <FaBeer />?{" "}
  10.     </h3>
  11.   );
  12. }
  13. ```

Ending up with a large JS bundle? Check out this issue.

Adjustment CSS


From version 3, vertical-align: middle is not automatically given. Please use IconContext to specify className or specify an inline style.

Global Inline Styling


  1. ```tsx
  2. <IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>
  3. ```

Global className Styling


Component

  1. ```tsx
  2. <IconContext.Provider value={{ className: 'react-icons' }}>
  3. ```

CSS

  1. ```css
  2. .react-icons {
  3.   vertical-align: middle;
  4. }
  5. ```

TypeScript native support


Dependencies on @types/react-icons can be deleted.

Yarn


  1. ``` sh
  2. yarn remove @types/react-icons
  3. ```

NPM


  1. ``` sh
  2. npm remove @types/react-icons
  3. ```

Contributing


Development


  1. ``` sh
  2. yarn
  3. yarn submodule  # fetch icon sources
  4. cd packages/react-icons
  5. yarn build
  6. ```

Preview


The preview site is the [react-icons](https://react-icons.github.io/react-icons) website, built in NextJS.

  1. ``` sh
  2. cd packages/react-icons
  3. yarn build

  5. cd ../preview
  6. yarn start
  7. ```

Demo


The demo is a Create React App boilerplate withreact-icons added as a dependency for easy testing.

  1. ``` sh
  2. cd packages/react-icons
  3. yarn build

  5. cd ../demo
  6. yarn start
  7. ```

Why React SVG components instead of fonts?


SVG is supported by all major browsers. Withreact-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.

Related Projects


- react-svg-morph

Licence


MIT

- Icons are taken from the other projects so please check each project licences accordingly.