svg react icons of popular icon packs

Last update: Jan 5, 2023

Related tags

Overview

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.

Installation (for standard modern project)

yarn add react-icons
# or
npm install react-icons --save

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

Installation (for meteorjs, gatsbyjs, etc)

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";
class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

Icons

Icon Library	License	Version	Count
Font Awesome	CC BY 4.0 License	5.12.1
0d1f27efb836eb2ab994ba37221849ed64a73e5c	1560
Ionicons 4	MIT	4.6.3	696
Ionicons 5	MIT	5.2.3	1300
Material Design icons	Apache License Version 2.0	3.0.1	960
Typicons	CC BY-SA 3.0	2.0.9	336
Github Octicons icons	MIT	8.5.0	184
Feather	MIT	4.28.0	286
Game Icons	CC BY 3.0	e510027a83a79e44673022a25e93b306a9165a21	3786
Weather Icons	SIL OFL 1.1	2.0.10	219
Devicons	MIT	1.8.0	192
Ant Design Icons	MIT	4.0.0	788
Bootstrap Icons	MIT	1.0.0-alpha3	668
Remix Icon	Apache License Version 2.0	2.5.0	2172
Flat Color Icons	MIT	1.0.2	329
Grommet-Icons	Apache License Version 2.0	4.4.0	562
Heroicons	MIT	0.4.2	448
Simple Icons	CC0 1.0 Universal	2.13.0	1316
IcoMoon Free	CC BY 4.0 License	d006795ede82361e1bac1ee76f215cf1dc51e4ca	491
BoxIcons	CC BY 4.0 License	2.0.5	738
css.gg	MIT	2.0.0	704
VS Code Icons	CC BY 4.0	0.0.1	319

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

Configuration

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

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

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

Contributing

Development

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

Preview

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

cd packages/react-icons
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 build

cd ../demo
yarn start

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.

Related Projects

react-svg-morph

Licence

MIT

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

Comments

React Icons Imports everything even when included 2 or 3 icons

I had imported below icons in Create React App and I see that it included the whole library in the bundle. Attached is a screenshot. How do we get around this?

import { FaBarChart, FaDatabase, FaMinus, FaPlus, FaStickyNote } from 'react-icons/lib/fa' import { IoChatboxWorking } from 'react-icons/lib/io'

opened by sandeepreddy19 139
Fix #154 by allowing absolute imports

Fix #154 by giving developers the option of either using absolute imports or destructuring.

It generates a unique file for each icon.

This will eliminate the assumption that the build systems are configured for tree shaking.

opened by aogaili 20
new design
Detail

[x] support esmodules & change import style

[x] global icon configure with context API

[x] supports webpack optimization (speed up for build)

[x] typescript native support

[x] use gitsubmodules (easier update)

[x] use yarn (easily to test by managing all related package in yarn workspace)

[x] new icon set

feathericons

[x] upgrade icon

fontawesome5

[x] configure travis ci & deploy preview site to netlify

example preview: http://5b1f83e81f12b742d62c8aca.react-icons.netlify.com

new import / configure style

import React from "react"; import { IconContext } from "react-icons"; import { FaFolder } from "react-icons/lib/fa"; import { MdAccessibility } from "react-icons/lib/md"; funciton App () { return ( <IconContext.Provider value={{ color: "#333" }}> <div> <MdAccessibility /> <FaFolder /> </div> </IconContext.Provider> ); }

build speed/size improvement!

Use one icon from each of fa and md. SIZE: -84% BUILD TIME: -40%

before:

File sizes after gzip: 244.25 KB build\static\js\main.2f2e05e7.js 299 B build\static\css\main.c17080f1.css Done in 19.83s.

after:

File sizes after gzip: 38.75 KB build\static\js\main.cc198299.js 299 B build\static\css\main.c17080f1.css Done in 11.79s.

Todo

[x] add license

[x] fix README

[x] update preview site

I want a vote on this PR

👍 / 👎
opened by kamijin-fanta 19

lib version doesn't use lib of react-icons-base

I'm using as documented import FaBeear from 'react-icons/lib/fa/beer'; and getting the following error:

ERROR in ./~/react-icon-base/index.js
Module parse failed: /Users/tobias.pinnekamp/Sites/react-boilerplate/node_modules/react-icon-base/index.js Unexpected token (3:50)
You may need an appropriate loader to handle this file type.
| import { default as React, PropTypes } from 'react'
| 
| const IconBase = ({ children, color, size, style, ...props }, { reactIconBase = {} }) => {
|   const computedSize = size || reactIconBase.size || '1em'
|   return (
 @ ./~/react-icons/lib/fa/beer.js 18:15-41
 @ ./app/containers/LoginForm/index.js
 @ ./app/containers/App/index.js
 @ ./app/app.js
 @ multi main

the problem seems to be that the lib version of react-icons does not use the lib version of react-icons-base. Because if I edit beer.js to use the lib version of react-icons-base it's working fine.

But also I guess it has something to do, that I'm using https://github.com/mxstbr/react-boilerplate Because in a previous learning project using the icons worked fine.

Any hints?

opened by tpinne 19

How to appropriately create a loader in webpack?
Right now this is the loader i'm using in my webpack:

{ test: /react-icons\/(.)*(.js)$/, loader: 'babel', include: config.iconPath }

with config.iconPath pointing to my "node_modules/react-icons" path.

This all works, however currently every time I start my localhost dev, it takes around 8-10 seconds for it to finally be viewable in the browser. Is this normal? Or am I doing this wrong? Thank you!
opened by codetony25 16
Question: Is this project still maintained?

Thank you for this is a great library. But it seams to me that this project is not being maintained anymore

Latest commit is on 26 May 2016 (a month ago)

If it's the case then a search for a new maintainer might be the best option.

opened by zaygraveyard 14
How to import compiled version?

The guide in readme confuses me. I want to import compiled version because I don't want to use babel to compile my node_modules. I tried with: import {FaChevronCircleLeft as BackIcon} from 'react-icons/lib'; but BackIcon is undefined. What's the correct importing method? Thank you!

opened by Woolseyyy 13
Fix converting aria-* attribute names to camel case

This PR fixes the new errors caused by hero icons 2 (Invalid ARIA attribute ariaHidden. Did you mean aria-hidden.) by non converting the aria-* attributes names to camel case.

cc: @kamijin-fanta
builds

opened by bacali95 12
How to change size and color for icon

Hello, I read document I see this code <Icon size={30} color='aliceblue' style={{ ... }} />

But I dont understand how to use this, e.x I want to user MdStar with size:2em, color=blue <MdStar size={2} color="blue">

Is it ? Pls give more code

opened by NgKhanh 12
[3.6.1] error TS2306: File 'node_modules/react-icons/index.d.ts' is not a module.
Describe the bug

Upon attempting to update react-icons from v3.6.0 to v3.6.1 in a Gatsby TypeScript project, I am met with the following error:

error TS2306: File '/root/project/node_modules/react-icons/index.d.ts' is not a module.

The line of code that triggers this build-time error is:

import { IconContext } from 'react-icons';

Minimal sample repository

Not minimal, but I first ran into it in https://github.com/wKovacs64/pwl/pull/55.

Let me know if a minimal reproduction would be more helpful and I will throw one together.

Expected behavior

I expected it to work as it did in v3.5.0.

Screenshots

N/A

Desktop (please complete the following information):

Device: Server (Circle CI container)

OS: Linux (Ubuntu)

Browser: N/A

Version: N/A

Additional context

I suspect this is a result of the module structure changes made in v3.6.0 beta, and it appears v3.6.0 was published using the old (v3.5.0) structure? See v3.6.0 vs. v3.6.1 on unpkg.
opened by wKovacs64 11
Convert icons to PureComponent as baseline

Given the rendering/performance differences, it's probably worthwhile to convert rendering to use PureComponent as the base instead of the stateless component.

opened by tracker1 10
After HeroIcons 2 was added, when using heroicons 1 app is not starting
Describe the bug Brave error: Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/react-icons_all.js?v=826af561' does not provide an export named 'HiHome' Firefox error: Uncaught SyntaxError: ambiguous indirect export: HiHome

Minimal sample repository I was using 4.3.1 and after upgrading to 4.7.1 Im getting error

Expected behavior No error

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Device: PC

OS: WIN 10

Browser: all

Version 4.7.1 (or when HeroIcons2 were added)

Additional context I thought this would get fixed sooner, but as it is not fixed yet im creating this issue
opened by tomimarkus991 0
Add SaveClose icon

Is your feature request related to a problem? Please describe. I'm implementing the feature (immediately closing after saving the content) in React app and using react-icons in my project. But can't find a proper icon.

Describe the solution you'd like I'd like to use SaveClose icon.

Describe alternatives you've considered https://www.visualpharm.com/free-icons/save%20close-595b40b75ba036ed117d8ec5 It's from Icons8.

Additional context We need not only Save icon, but also SaveClose icon to close the window after saving the content.

opened by bitsbuildomniverse 0
Bump qs from 6.5.2 to 6.5.3
Bumps qs from 6.5.2 to 6.5.3.

Changelog

Sourced from qs's changelog.

6.5.3

[Fix] parse: ignore __proto__ keys (#428)

[Fix] utils.merge: avoid a crash with a null target and a truthy non-array source

[Fix] correctly parse nested arrays

[Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)

[Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided

[Fix] when parseArrays is false, properly handle keys ending in []

[Fix] fix for an impossible situation: when the formatter is called with a non-string value

[Fix] utils.merge: avoid a crash with a null target and an array source

[Refactor] utils: reduce observable [[Get]]s

[Refactor] use cached Array.isArray

[Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)

[Refactor] parse: only need to reassign the var once

[Robustness] stringify: avoid relying on a global undefined (#427)

[readme] remove travis badge; add github actions/codecov badges; update URLs

[Docs] Clean up license text so it’s properly detected as BSD-3-Clause

[Docs] Clarify the need for "arrayLimit" option

[meta] fix README.md (#399)

[meta] add FUNDING.yml

[actions] backport actions from main

[Tests] always use String(x) over x.toString()

[Tests] remove nonexistent tape option

[Dev Deps] backport from main

Commits

298bfa5 v6.5.3

ed0f5dc [Fix] parse: ignore __proto__ keys (#428)

691e739 [Robustness] stringify: avoid relying on a global undefined (#427)

1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs

12ac1c4 [meta] fix README.md (#399)

0338716 [actions] backport actions from main

5639c20 Clean up license text so it’s properly detected as BSD-3-Clause

51b8a0b add FUNDING.yml

45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...

f814a7f [Dev Deps] backport from main

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0