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.
yarn add react-icons
# or
npm install react-icons --save
example usage
import { FaBeer } from "react-icons/fa";
function Question() {
return (
<h3>
Lets go for a <FaBeer />?
</h3>
);
}
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 react-icons you import from.
For example, to use an icon from Material Design, your import would be: import { ICON_NAME } from 'react-icons/md';
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.
yarn add @react-icons/all-files
# or
npm install @react-icons/all-files --save
example usage
import { FaBeer } from "@react-icons/all-files/fa/FaBeer";
function Question() {
return (
<h3>
Lets go for a <FaBeer />?
</h3>
);
}
You can add more icons by submitting pull requests or creating issues.
You can configure react-icons props using React Context API.
Requires React 16.3 or higher.
import { IconContext } from "react-icons";
<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
<div>
<FaFolder />
</div>
</IconContext.Provider>;
| Key | Default | Notes |
|---|---|---|
color | 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 |
Import path has changed. You need to rewrite from the old style.
// OLD IMPORT STYLE
import FaBeer from "react-icons/lib/fa/beer";
function Question() {
return (
<h3>
Lets go for a <FaBeer />?
</h3>
);
}
// NEW IMPORT STYLE
import { FaBeer } from "react-icons/fa";
function Question() {
return (
<h3>
Lets go for a <FaBeer />?
</h3>
);
}
Ending up with a large JS bundle? Check out this issue.
From version 3, vertical-align: middle is not automatically given. Please use IconContext to specify className or specify an inline style.
<IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>
className StylingComponent
<IconContext.Provider value={{ className: 'react-icons' }}>
CSS
.react-icons {
vertical-align: middle;
}
Dependencies on @types/react-icons can be deleted.
yarn remove @types/react-icons
npm remove @types/react-icons
./build-script.sh will build the whole project. See also CI scripts for more information.
yarn
cd packages/react-icons
yarn fetch # fetch icon sources
yarn build
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 yarn fetch && yarn check && yarn build.
https://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/icons/index.ts
Note The project is not actively accepting PR for the preview site at this time.
The preview site is the react-icons website, built in Astro+React.
cd packages/react-icons
yarn fetch
yarn build
cd ../preview-astro
yarn start
The demo is a Create React App boilerplate with react-icons added as a dependency for easy testing.
cd packages/react-icons
yarn fetch
yarn build
cd ../demo
yarn start
SVG is supported by all major browsers. 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.
MIT