react-icons vs @fortawesome/fontawesome-svg-core vs bootstrap-icons vs @mdi/js vs feather-icons vs material-design-icons vs heroicons vs @iconify/iconify
Icon Libraries for Web Development Comparison
3 Years
react-icons@fortawesome/fontawesome-svg-corebootstrap-icons@mdi/jsfeather-iconsmaterial-design-iconsheroicons@iconify/iconifySimilar Packages:
What's Icon Libraries for Web Development?

Icon libraries are collections of scalable vector icons that can be easily integrated into web applications to enhance user interfaces. They provide a wide range of icons that can be customized in terms of size, color, and style, making it easier for developers to create visually appealing and user-friendly designs. These libraries often come with various formats and frameworks compatibility, allowing for seamless integration into different projects.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-icons10,700,114
12,28886.2 MB2237 months agoMIT
@fortawesome/fontawesome-svg-core2,004,669
75,618431 kB3,7653 days agoMIT
bootstrap-icons468,778
7,7322.99 MB4394 months agoMIT
@mdi/js275,321
1696.56 MB42 years agoApache-2.0
feather-icons134,327
25,631625 kB492a year agoMIT
material-design-icons66,893
52,047-3769 years agoApache-2.0
heroicons45,178
22,883700 kB410 months agoMIT
@iconify/iconify35,992
5,422498 kB182 years agoMIT
Feature Comparison: react-icons vs @fortawesome/fontawesome-svg-core vs bootstrap-icons vs @mdi/js vs feather-icons vs material-design-icons vs heroicons vs @iconify/iconify

Icon Variety

  • react-icons:

    React Icons aggregates icons from various libraries, allowing developers to easily use icons from different sets without needing to import multiple packages.

  • @fortawesome/fontawesome-svg-core:

    Font Awesome offers thousands of icons across various styles including solid, regular, and brands, making it one of the most comprehensive icon libraries available.

  • bootstrap-icons:

    Bootstrap Icons offers a curated set of icons that are specifically designed to work well with Bootstrap components, ensuring a cohesive look and feel.

  • @mdi/js:

    Material Design Icons provides a large collection of icons specifically designed to align with Material Design guidelines, ensuring consistency in design.

  • feather-icons:

    Feather Icons features a small set of beautifully crafted icons that emphasize simplicity and clarity, making them easy to integrate into various designs.

  • material-design-icons:

    Material Design Icons includes a comprehensive set of icons that follow the Material Design specifications, ensuring a consistent user experience across applications.

  • heroicons:

    Heroicons provides a set of icons designed specifically for Tailwind CSS, offering a modern aesthetic that matches the framework's design principles.

  • @iconify/iconify:

    Iconify supports a wide range of icon sets, allowing users to access multiple libraries from a single package, which increases flexibility in design choices.

Customization

  • react-icons:

    React Icons allows for easy customization through props, enabling developers to adjust size and color directly in their React components.

  • @fortawesome/fontawesome-svg-core:

    Font Awesome allows for extensive customization options, including size, color, and animation effects, making it adaptable to various design needs.

  • bootstrap-icons:

    Bootstrap Icons can be styled using Bootstrap's utility classes, making it easy to adjust their appearance to match the overall design of Bootstrap-based applications.

  • @mdi/js:

    Material Design Icons can be customized using CSS variables, allowing developers to easily adjust the icon colors and sizes to fit their application's theme.

  • feather-icons:

    Feather Icons are designed to be easily customizable, with a simple SVG structure that allows for quick adjustments in size and color.

  • material-design-icons:

    Material Design Icons can be styled using CSS, allowing for easy customization to fit the application's branding and design requirements.

  • heroicons:

    Heroicons can be customized using Tailwind CSS classes, providing a seamless way to adjust their appearance while maintaining consistency with Tailwind's design system.

  • @iconify/iconify:

    Iconify icons can be easily customized with CSS, allowing developers to change colors and sizes dynamically, providing flexibility in design implementation.

Integration

  • react-icons:

    React Icons provides a simple way to integrate icons from various libraries into React applications, making it easy to switch between different icon sets.

  • @fortawesome/fontawesome-svg-core:

    Font Awesome integrates easily with various frameworks and libraries, including React, Vue, and Angular, making it versatile for different projects.

  • bootstrap-icons:

    Bootstrap Icons is built to work seamlessly with Bootstrap, allowing for quick and easy integration into Bootstrap-based projects without additional configuration.

  • @mdi/js:

    Material Design Icons can be easily integrated into any project that follows Material Design principles, ensuring a smooth implementation process.

  • feather-icons:

    Feather Icons can be integrated into any web project with minimal setup, making it a flexible choice for developers looking for a lightweight solution.

  • material-design-icons:

    Material Design Icons can be integrated into any web application following Material Design guidelines, providing a consistent user experience across platforms.

  • heroicons:

    Heroicons integrates perfectly with Tailwind CSS, allowing for a straightforward implementation in Tailwind-based projects and ensuring design consistency.

  • @iconify/iconify:

    Iconify is designed for easy integration with modern web frameworks, providing a straightforward API that simplifies the process of adding icons to applications.

Performance

  • react-icons:

    React Icons is designed to be efficient, allowing for selective imports of icons to minimize bundle size and improve application performance.

  • @fortawesome/fontawesome-svg-core:

    Font Awesome is optimized for performance, with options for tree-shaking and lazy-loading to reduce the size of the final bundle.

  • bootstrap-icons:

    Bootstrap Icons are lightweight and designed to work efficiently with Bootstrap, ensuring that they do not slow down the application.

  • @mdi/js:

    Material Design Icons is optimized for performance, providing a lightweight solution that minimizes the impact on loading times.

  • feather-icons:

    Feather Icons are extremely lightweight, which enhances performance and reduces loading times, making them ideal for performance-sensitive applications.

  • material-design-icons:

    Material Design Icons are optimized for performance, providing a lightweight solution that integrates well with Material Design applications.

  • heroicons:

    Heroicons are designed to be lightweight and efficient, ensuring fast loading times and minimal impact on overall application performance.

  • @iconify/iconify:

    Iconify is designed to be lightweight and efficient, allowing for fast loading times and minimal impact on application performance.

Community and Support

  • react-icons:

    React Icons has a strong community and provides good documentation, making it easy for developers to find support and examples for using icons in React applications.

  • @fortawesome/fontawesome-svg-core:

    Font Awesome has a large and active community, providing extensive documentation, tutorials, and support resources for developers.

  • bootstrap-icons:

    Bootstrap Icons benefits from the extensive Bootstrap community, offering a wealth of resources and support for developers using Bootstrap.

  • @mdi/js:

    Material Design Icons is backed by a strong community that follows Material Design principles, providing good support and documentation for users.

  • feather-icons:

    Feather Icons has a supportive community and offers documentation that helps developers integrate and customize icons effectively.

  • material-design-icons:

    Material Design Icons is supported by a robust community that adheres to Material Design guidelines, offering ample resources for developers.

  • heroicons:

    Heroicons is supported by the Tailwind CSS community, providing resources and documentation that facilitate easy integration and usage.

  • @iconify/iconify:

    Iconify has a growing community and offers good documentation, making it easier for developers to find help and resources for integration.

How to Choose: react-icons vs @fortawesome/fontawesome-svg-core vs bootstrap-icons vs @mdi/js vs feather-icons vs material-design-icons vs heroicons vs @iconify/iconify
  • react-icons:

    Select React Icons if you are working within a React environment and want a straightforward way to include icons from various libraries. It provides a unified API for different icon sets, making it easy to switch and customize icons in React applications.

  • @fortawesome/fontawesome-svg-core:

    Choose Font Awesome if you need a comprehensive icon set with a wide variety of icons, including brands and solid styles. It's ideal for projects that require a well-established library with extensive documentation and community support.

  • bootstrap-icons:

    Bootstrap Icons is the right choice if you are already using Bootstrap in your project. It offers a simple and clean set of icons that integrate seamlessly with Bootstrap components, enhancing the overall UI without additional overhead.

  • @mdi/js:

    Select Material Design Icons if you're building applications that adhere to Google's Material Design guidelines. This package provides a rich set of icons that align closely with Material Design principles, ensuring consistency in design.

  • feather-icons:

    Choose Feather Icons for a minimalist design approach. Feather Icons are lightweight and customizable, making them suitable for projects that prioritize simplicity and elegance in their UI.

  • material-design-icons:

    Use Material Design Icons if you are developing applications that follow Material Design principles. This library offers a comprehensive set of icons that are easy to use and integrate, ensuring a cohesive design across your application.

  • heroicons:

    Heroicons is ideal for Tailwind CSS users, providing a set of beautifully crafted icons that match the Tailwind design philosophy. It's perfect for projects that require a modern and consistent look with a focus on usability.

  • @iconify/iconify:

    Opt for Iconify if you want a versatile solution that supports multiple icon sets and allows for easy switching between them. It's great for projects that require a mix of different styles and brands without being locked into a single design language.

README for react-icons
React Icons

React Icons

npm

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

function Question() {
  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)

Note This option has not had a new release for some time. More info https://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
# or
npm install @react-icons/all-files --save

example usage

import { FaBeer } from "@react-icons/all-files/fa/FaBeer";

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

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 | | Font Awesome 6 | CC BY 4.0 License | 6.5.2 | 2045 | | Ionicons 4 | MIT | 4.6.3 | 696 | | Ionicons 5 | MIT | 5.5.4 | 1332 | | Material Design icons | Apache License Version 2.0 | 4.0.0-98-g9beae745bb | 4341 | | Typicons | CC BY-SA 3.0 | 2.1.2 | 336 | | Github Octicons icons | MIT | 18.3.0 | 264 | | Feather | MIT | 4.29.1 | 287 | | Lucide | ISC | v5.1.0-6-g438f572e | 1215 | | 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.4.2 | 831 | | Bootstrap Icons | MIT | 1.11.3 | 2716 | | Remix Icon | Apache License Version 2.0 | 4.2.0 | 2860 | | Flat Color Icons | MIT | 1.0.2 | 329 | | Grommet-Icons | Apache License Version 2.0 | 4.12.1 | 635 | | Heroicons | MIT | 1.0.6 | 460 | | Heroicons 2 | MIT | 2.1.3 | 888 | | Simple Icons | CC0 1.0 Universal | 12.14.0 | 3209 | | Simple Line Icons | MIT | 2.5.5 | 189 | | IcoMoon Free | CC BY 4.0 License | d006795ede82361e1bac1ee76f215cf1dc51e4ca | 491 | | BoxIcons | MIT | 2.1.4 | 1634 | | css.gg | MIT | 2.1.1 | 704 | | VS Code Icons | CC BY 4.0 | 0.0.35 | 461 | | Tabler Icons | MIT | 3.2.0 | 5237 | | Themify Icons | MIT | v0.1.2-2-g9600186 | 352 | | Radix Icons | MIT | @radix-ui/react-icons@1.3.0-1-g94b3fcf | 318 | | Phosphor Icons | MIT | 2.1.1 | 9072 | | Icons8 Line Awesome | MIT | 1.3.1 | 1544 |

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

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

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

Add/Update icon set

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 run yarn fetch && yarn check && yarn build.

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

Preview

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

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

cd packages/react-icons
yarn fetch
yarn build

cd ../preview-astro
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

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

Licence

MIT

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