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.

This repository is an accessibility focused version of the original react-icons library. It is a fork of the original react-icons library with the following changes:

• All icons are exported as <svg> elements with a <title> tag which defaults to "Icon" if no title is provided by the developer.
• Build scripts have been added and modified to streamline setup and contribution.

Installation (for standard modern project)

yarn add @accessitech/react-icons
# or
npm install @accessitech/react-icons --save

Example usage

import { IconContext } from "@accessitech/react-icons";
import { FaBeer } from "@accessitech/react-icons/fa";

function Question() {
  return (
    <IconContext.Provider>
      <h3>
        Lets go for a <FaBeer />?
      </h3>
    </IconContext.Provider>
  );
}

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';

React Icons API

Icon

Icon components are named by their camelCase equivalent and have the same props as the original react-icons library.

interface IconBaseProps extends React.SVGAttributes<SVGElement> {
  children?: React.ReactNode;
  size?: string | number;
  color?: string;
  title?: string;
}

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

IconContext.Provider

The IconContext.Provider component allows you to easily customize the props of all child icon components usingReact Context API, and has the same props as the original react-icons library.

interface IconContext {
  color?: string;
  size?: string;
  className?: string;
  style?: React.CSSProperties;
  attr?: React.SVGAttributes<SVGElement>;
}

| Key | Default | Notes | | ----------- | --------------------- | ------------------------------- | | color | undefined (inherit) | | | size | 1em | | | className | undefined | | | style | undefined | Can overwrite size and color | | attr | undefined | Overwritten by other attributes |

Available 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 | | Ionicons 4 | MIT | 4.6.3 | 696 | | Ionicons 5 | MIT | 5.5.0 | 1332 | | Material Design icons | Apache License Version 2.0 | 4.0.0-61-g511eea577b | 4341 | | Typicons | CC BY-SA 3.0 | 2.1.2 | 336 | | Github Octicons icons | MIT | 8.5.0 | 184 | | Feather | MIT | 4.28.0 | 286 | | 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.2.1 | 789 | | Bootstrap Icons | MIT | 1.10.3 | 2592 | | Remix Icon | Apache License Version 2.0 | 2.5.0 | 2271 | | Flat Color Icons | MIT | 1.0.2 | 329 | | Grommet-Icons | Apache License Version 2.0 | 4.9.0 | 620 | | Heroicons | MIT | 1.0.6 | 460 | | Heroicons 2 | MIT | 2.0.16 | 584 | | Simple Icons | CC0 1.0 Universal | 8.6.0 | 2437 | | Simple Line Icons | MIT | 2.5.5 | 189 | | IcoMoon Free | CC BY 4.0 License | d006795ede82361e1bac1ee76f215cf1dc51e4ca | 491 | | BoxIcons | CC BY 4.0 License | 2.1.4 | 814 | | css.gg | MIT | 2.0.0 | 704 | | VS Code Icons | CC BY 4.0 | 0.0.32 | 423 | | Tabler Icons | MIT | 2.7.0 | 3455 | | Themify Icons | MIT | v0.1.2-2-g9600186 | 352 | | Radix Icons | MIT | @modulz/[email protected] | 318 |

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

Contributing

./build-script.sh will build the whole project. See also CI scripts for more information.

Development

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

Preview

The preview site is the react-icons website, built in NextJS.

cd packages/react-icons
yarn fetch
yarn build

cd ../preview
yarn start

Demo

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

Everything

To build everything, run ./build-script.sh or yarn build.

Why React SVG components instead of fonts?

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.

Migrating 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";

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.

Adjustment CSS

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

Global Inline Styling

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

Global className Styling

Component

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

CSS

.react-icons {
  vertical-align: middle;
}

TypeScript native support

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

Yarn

yarn remove @types/react-icons

NPM

npm remove @types/react-icons

Related Projects

• react-svg-morph

Licence

MIT

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