Include popular icons in your React projects easily withreact-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

yarn add react-icons# ornpm install react-icons --save

example usage

import{FaBeer}from"react-icons/fa";functionQuestion(){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 underreact-icons you import from.

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

NoteThis option has not had a new release for some time.More infohttps://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# ornpm install @react-icons/all-files --save

example usage

import{FaBeer}from"@react-icons/all-files/fa/FaBeer";functionQuestion(){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 usingReact Context API.

RequiresReact 16.3 or higher.

import{IconContext}from"react-icons";<IconContext.Providervalue={{color:"blue",className:"global-class-name"}}><div><FaFolder/></div></IconContext.Provider>;

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

// OLD IMPORT STYLEimportFaBeerfrom"react-icons/lib/fa/beer";functionQuestion(){return(<h3>      Lets go for a<FaBeer/>?</h3>);}

// NEW IMPORT STYLEimport{FaBeer}from"react-icons/fa";functionQuestion(){return(<h3>      Lets go for a<FaBeer/>?</h3>);}

Ending up with a large JS bundle? Check outthis issue.

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

<IconContext.Providervalue={{style:{verticalAlign:'middle'}}}>

Component

<IconContext.Providervalue={{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.

yarncd packages/react-iconsyarn fetch# fetch icon sourcesyarn 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 runyarn fetch && yarn check && yarn build.

https://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/icons/index.ts

NoteThe project is not actively accepting PR for the preview site at this time.

The preview site is thereact-icons website, built in Astro+React.

cd packages/react-iconsyarn fetchyarn buildcd ../preview-astroyarn start

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

cd packages/react-iconsyarn fetchyarn buildcd ../demoyarn start

SVG issupported 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.

• react-svg-morph

MIT

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