Popularity
8.1
Growing
Activity
6.2
Declining
3,319
34
241

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags: UI Components     Icons     React     Inline     Material     Svg     Font     Awesome     Design    
Latest version: v3.7.0

react-icons alternatives and similar libraries

Based on the "Icons" category

Do you think we are missing an alternative of react-icons or a related project?

Add another 'Icons' Library

README

React Icons

npm

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

Installation

npm install react-icons --save

Usage

import { FaBeer } from 'react-icons/fa';

class Question extends React.Component {
    render() {
        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';

Icons

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

Configuration

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

requirement 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 memo
color undefined(inherit)
size 1em
className undefined
style undefined can overwrite size and color
attr undefined overwritten by other attributes

Migrate from version 2 -> 3

Change import style

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

// OLD IMPORT STYLE
import FaBeer from 'react-icons/lib/fa/beer';

class Question extends React.Component {
    render() {
        return <h3> Lets go for a <FaBeer />? </h3>
    }
}
// NEW IMPORT STYLE
import { FaBeer } from 'react-icons/fa';

class Question extends React.Component {
    render() {
        return <h3> Lets go for a <FaBeer />? </h3>
    }
}

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

example for global styling

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

example for give global className

// app.tsx
<IconContext.Provider value={{ className: 'react-icons' }}>

// app.css
.react-icons {
  vertical-align: middle;
}

TypeScript native support

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

npm remove @types/react-icons

Contribute

development

yarn
yarn submodule  # fetch icon sources
cd packages/react-icons
yarn build

scripts for run demo

cd packages/react-icons
yarn build
cd ../demo
yarn start

run preview site

cd packages/react-icons
yarn build
cd ../preview
yarn start

Tips

SVG

Svg is supported by all major browsers.

Why ES6 import and not fonts

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.

Licence

MIT

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


*Note that all licence references and agreements mentioned in the react-icons README section above are relevant to that project's source code only.