react-icons
v5.5.0TypeScript
SVG React icons of popular icon packs using ES6 imports
0/weekUpdated 11 months agoMITUnpacked: 86.2 MB
Published by Goran Gajic
npm install 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)
``bash`
yarn add react-iconsor
npm install react-icons --save
example usage
`jsx
import { FaBeer } from "react-icons/fa";
function Question() {
return (
Lets go for a
);
}
`
View the documentation for further usage examples and how to use icons from other packages. _NOTE_: each Icon package has it's own subfolder under
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)
> Note
> This option has not had a new release for some time.
> More info https://github.com/react-icons/react-icons/issues/593
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.
bash
yarn add @react-icons/all-files
or
npm install @react-icons/all-files --save
`example usage
jsx
import { FaBeer } from "@react-icons/all-files/fa/FaBeer";function Question() {
return (
Lets go for a
);
}
`Icons
| Icon Library | License | Version | Count |
| ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----: |
| Circum Icons | MPL-2.0 license | 1.0.0 | 288 |
| Font Awesome 5 | CC BY 4.0 License | 5.15.4-3-gafecf2a | 1612 |
| Font Awesome 6 | CC BY 4.0 License | 6.5.2 | 2045 |
| Ionicons 4 | MIT | 4.6.3 | 696 |
| Ionicons 5 | MIT | 5.5.4 | 1332 |
| Material Design icons | Apache License Version 2.0 | 4.0.0-98-g9beae745bb | 4341 |
| Typicons | CC BY-SA 3.0 | 2.1.2 | 336 |
| Github Octicons icons | MIT | 18.3.0 | 264 |
| Feather | MIT | 4.29.1 | 287 |
| Lucide | ISC | v5.1.0-6-g438f572e | 1215 |
| Game Icons | CC BY 3.0 | 12920d6565588f0512542a3cb0cdfd36a497f910 | 4040 |
| Weather Icons | SIL OFL 1.1 | 2.0.12 | 219 |
| Devicons | MIT | 1.8.0 | 192 |
| Ant Design Icons | MIT | 4.4.2 | 831 |
| Bootstrap Icons | MIT | 1.11.3 | 2716 |
| Remix Icon | Apache License Version 2.0 | 4.2.0 | 2860 |
| Flat Color Icons | MIT | 1.0.2 | 329 |
| Grommet-Icons | Apache License Version 2.0 | 4.12.1 | 635 |
| Heroicons | MIT | 1.0.6 | 460 |
| Heroicons 2 | MIT | 2.1.3 | 888 |
| Simple Icons | CC0 1.0 Universal | 12.14.0 | 3209 |
| Simple Line Icons | MIT | 2.5.5 | 189 |
| IcoMoon Free | CC BY 4.0 License | d006795ede82361e1bac1ee76f215cf1dc51e4ca | 491 |
| BoxIcons | MIT | 2.1.4 | 1634 |
| css.gg | MIT | 2.1.1 | 704 |
| VS Code Icons | CC BY 4.0 | 0.0.35 | 461 |
| Tabler Icons | MIT | 3.2.0 | 5237 |
| Themify Icons | MIT | v0.1.2-2-g9600186 | 352 |
| Radix Icons | MIT | @radix-ui/react-icons@1.3.0-1-g94b3fcf | 318 |
| Phosphor Icons | MIT | 2.1.1 | 9072 |
| Icons8 Line Awesome | MIT | 1.3.1 | 1544 |
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._
jsx
import { IconContext } from "react-icons";
`| Key | Default | Notes |
| ----------- | --------------------- | ---------------------------------- |
|
| undefined (inherit) | |
| size | 1em | |
| className | undefined | |
| style | undefined | Can overwrite size and color |
| attr | undefined | Overwritten by other attributes |
| title | undefined | Icon description for accessibility |Migrating from version 2 -> 3
$3
Import path has changed. You need to rewrite from the old style.
`jsx
// OLD IMPORT STYLE
import FaBeer from "react-icons/lib/fa/beer";function Question() {
return (
Lets go for a
);
}
`jsx
// NEW IMPORT STYLE
import { FaBeer } from "react-icons/fa";function Question() {
return (
Lets go for a
);
}
`Ending up with a large JS bundle? Check out this issue.
$3
From version 3,
is not automatically given. Please use IconContext to specify className or specify an inline style.#### Global Inline Styling
`tsx
`#### Global
StylingComponent
`tsx
`CSS
css
.react-icons {
vertical-align: middle;
}
`$3
Dependencies on
can be deleted.#### Yarn
`bash
yarn remove @types/react-icons
`#### NPM
bash
npm remove @types/react-icons
`Contributing
will build the whole project. See also CI scripts for more information.$3
`bash
yarn
cd packages/react-icons
yarn fetch # fetch icon sources
yarn build
`$3
First, check the discussion to see if anyone would like to add an icon set.
https://github.com/react-icons/react-icons/discussions/categories/new-icon-set
The SVG files to be fetched are managed in this file. Edit this file and run
.https://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/icons/index.ts
$3
> Note
> The project is not actively accepting PR for the preview site at this time.
react-icons website, built in Astro+React.`bash
cd packages/react-icons
yarn fetch
yarn buildcd ../preview-astro
yarn start
`$3
The demo is a Create React App boilerplate with
added as a dependency for easy testing.`bash
cd packages/react-icons
yarn fetch
yarn buildcd ../demo
yarn start
`Why React SVG components instead of fonts?
SVG is supported by all major browsers. With
Related Projects
Licence
MIT
- Icons are taken from the other projects so please check each project licences accordingly.