svg react icons of popular icon packs using ES6 imports

Usage no npm install needed!

<script type="module">
  import reactIcos from '';


React Icons

React Icons


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.


npm install react-icons --save


import FaBeer from 'react-icons/fa/beer';

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

If you are not using es6 compiler like babel or rollup.js, it's possible to include icons from the compiled folder ./lib. Babel by default will ignore node_modules so if you don't want to change the settings you will need to use files from ./lib

var FaBeer = require('react-icons/lib/fa/beer');

var Question = React.createClass({
    render: function() {
        return React.createElement('h3', null,
            ' Lets go for a ', React.createElement(FaBeer, null), '? '

You can include icons directly from react-icons using import FaBeer from 'react-icons', but you should wait to Webpack 2 implement dead code elimination based on es6 imports.

Also it's possible to include the whole icon pack from:

import * as FontAwesome from 'react-icons/fa'

or import multiple icons from the same pack

import {MdCancel, MdChat, MdCheck} from 'react-icons/md';

every icon pack is in their own folder

  • Material Design Icons => ./md
  • FontAwesome => ./fa
  • Typicons => ./ti
  • Github Octicons => ./go
  • Ionicons => ./io

to view all icons visit docs


Currently supported icons are:

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


You can configure react-icons props in context.

class HigherOrderComponent extends Component {

    static childContextTypes = {
        reactIconBase: PropTypes.object

    getChildContext() {
        return {
            reactIconBase: {
                color: 'tomato',
                size: 24,
                style: {

    render() {

Context is overriden inline.

<Icon size={30} color='aliceblue' style={{ ... }} />


Just add svg icons in ./icons/:icons-name folder and create pull request again develop after merge I will generate React components because this process is not fully automated yet.

svg ?

Svg is supported by all major browsers.

Why es6 import and not fonts?

With react-icons, you can send icons that are specified instead of one big font file to the users, helping you to recognize which icons are used in your project.




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