feather-icons vs @fortawesome/fontawesome-svg-core vs @iconify/iconify vs @mdi/js vs bootstrap-icons vs heroicons vs material-design-icons vs react-icons
Icon Libraries for Web Development
feather-icons@fortawesome/fontawesome-svg-core@iconify/iconify@mdi/jsbootstrap-iconsheroiconsmaterial-design-iconsreact-iconsSimilar Packages:

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.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
feather-icons161,28725,840625 kB5082 years agoMIT
@fortawesome/fontawesome-svg-core076,402441 kB316a month agoMIT
@iconify/iconify05,969498 kB193 years agoMIT
@mdi/js01716.56 MB42 years agoApache-2.0
bootstrap-icons07,9242.99 MB46710 months agoMIT
heroicons023,386700 kB3a year agoMIT
material-design-icons052,961-39610 years agoApache-2.0
react-icons012,51186.2 MB234a year agoMIT

Feature Comparison: feather-icons vs @fortawesome/fontawesome-svg-core vs @iconify/iconify vs @mdi/js vs bootstrap-icons vs heroicons vs material-design-icons vs react-icons

Icon Variety

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

  • @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.

  • @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.

  • @mdi/js:

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

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

  • heroicons:

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

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

  • react-icons:

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

Customization

  • feather-icons:

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

  • @fortawesome/fontawesome-svg-core:

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

  • @iconify/iconify:

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

  • @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.

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

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

  • material-design-icons:

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

  • react-icons:

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

Integration

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

  • @fortawesome/fontawesome-svg-core:

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

  • @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.

  • @mdi/js:

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

  • bootstrap-icons:

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

  • heroicons:

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

  • material-design-icons:

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

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

Performance

  • feather-icons:

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

  • @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.

  • @iconify/iconify:

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

  • @mdi/js:

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

  • bootstrap-icons:

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

  • heroicons:

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

  • material-design-icons:

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

  • react-icons:

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

Community and Support

  • feather-icons:

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

  • @fortawesome/fontawesome-svg-core:

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

  • @iconify/iconify:

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

  • @mdi/js:

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

  • bootstrap-icons:

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

  • heroicons:

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

  • material-design-icons:

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

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

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

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

  • @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.

  • @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.

  • @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.

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

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

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

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

README for feather-icons

Feather

Coverage npm downloads npm version CDNJS version

What is Feather?

Feather is a collection of simply beautiful open-source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility.

https://feathericons.com

npm install feather-icons

Table of contents

Quick start

Start with this CodePen Template to begin prototyping with Feather in the browser.

Or copy and paste the following code snippet into a blank html file.

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>
  <body>
    <!-- example icon -->
    <i data-feather="circle"></i>

    <script>
      feather.replace();
    </script>
  </body>
</html>

Usage

At its core, Feather is a collection of SVG files. This means that you can use Feather icons in all the same ways you can use SVGs (e.g. img, background-image, inline, object, embed, iframe). Here's a helpful article detailing the many ways SVGs can be used on the web: SVG on the Web – Implementation Options

The following are additional ways you can use Feather.

Client-side JavaScript

1. Install

[!NOTE] If you intend to use Feather with a CDN, you can skip this installation step.

Install with npm.

npm install feather-icons --save

Or just copy feather.js or feather.min.js into your project directory. You don't need both feather.js and feather.min.js.

2. Include

Include feather.js or feather.min.js with a <script> tag:

<script src="path/to/dist/feather.js"></script>

[!NOTE] > feather.js and feather.min.js are located in the dist directory of the npm package.

Or load the script from a CDN provider:

<!-- choose one -->
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

After including the script, feather will be available as a global variable.

3. Use

To use an icon on your page, add a data-feather attribute with the icon name to an element:

<i data-feather="circle"></i>

See the complete list of icons at feathericons.com.

4. Replace

Call the feather.replace() method:

<script>
  feather.replace();
</script>

All elements that have a data-feather attribute will be replaced with SVG markup corresponding to their data-feather attribute value. See the API Reference for more information about feather.replace().

Node

1. Install

Install with npm:

npm install feather-icons --save

2. Require

const feather = require('feather-icons');

3. Use

feather.icons.x;
// {
//    name: 'x',
//    contents: '<line ... /><line ... />`,
//    tags: ['cancel', 'close', 'delete', 'remove'],
//    attrs: {
//      class: 'feather feather-x',
//      xmlns: 'http://www.w3.org/2000/svg',
//      width: 24,
//      height: 24,
//      viewBox: '0 0 24 24',
//      fill: 'none',
//      stroke: 'currentColor',
//      'stroke-width': 2,
//      'stroke-linecap': 'round',
//      'stroke-linejoin': 'round',
//    },
//    toSvg: [Function],
// }

feather.icons.x.toSvg();
// <svg class="feather feather-x" ...><line ... /><line ... /></svg>

feather.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' });
// <svg class="feather feather-x foo bar" stroke-width="1" color="red" ...><line ... /><line ... /></svg>

See the API Reference for more information about the available properties and methods of the feather object.

SVG sprite

1. Install

[!NOTE] If you intend to use Feather with a CDN, you can skip this installation step.

Install with npm.

npm install feather-icons --save

Or just copy feather-sprite.svg into your project directory.

2. Use

Include an icon on your page with the following markup:

<svg
  width="24"
  height="24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <use href="path/to/feather-sprite.svg#circle" />
</svg>

[!NOTE] > circle in the above example can be replaced with any valid icon name. See the complete list of icon names at feathericons.com.

However, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons:

.feather {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
<svg class="feather">
  <use href="path/to/dist/feather-sprite.svg#circle" />
</svg>

Figma

Feather is available as a Figma component library. To use the components, log in to your Figma account and duplicate the file to your drafts.

API reference

feather.icons

An object with data about every icon.

Usage

feather.icons.x;
// {
//    name: 'x',
//    contents: '<line ... /><line ... />',
//    tags: ['cancel', 'close', 'delete', 'remove'],
//    attrs: {
//      class: 'feather feather-x',
//      xmlns: 'http://www.w3.org/2000/svg',
//      width: 24,
//      height: 24,
//      viewBox: '0 0 24 24',
//      fill: 'none',
//      stroke: 'currentColor',
//      'stroke-width': 2,
//      'stroke-linecap': 'round',
//      'stroke-linejoin': 'round',
//    },
//    toSvg: [Function],
// }

feather.icons.x.toString();
// '<line ... /><line ... />'

[!NOTE] > x in the above example can be replaced with any valid icon name. See the complete list of icon names at feathericons.com. Icons with multi-word names (e.g. arrow-right) cannot be accessed using dot notation (e.g. feather.icons.x). Instead, use bracket notation (e.g. feather.icons['arrow-right']).

View Source


feather.icons[name].toSvg([attrs])

Returns an SVG string.

Parameters

NameTypeDescription
attrs (optional)ObjectKey-value pairs in the attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar"). All default attributes on the <svg> tag can be overridden with the attrs object.

[!NOTE] You might find these SVG attributes helpful for manipulating icons:

Usage

feather.icons.circle.toSvg();
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'

feather.icons.circle.toSvg({ 'stroke-width': 1 });
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'

feather.icons.circle.toSvg({ class: 'foo bar' });
// '<svg class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'

View Source


feather.replace([attrs])

Replaces all elements that have a data-feather attribute with SVG markup corresponding to the element's data-feather attribute value.

Parameters

NameTypeDescription
attrs (optional)ObjectKey-value pairs in the attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar"). All default attributes on the <svg> tag can be overridden with the attrs object.

Usage

[!IMPORTANT] > feather.replace() only works in a browser environment.

Simple usage:

<i data-feather="circle"></i>
<!--
<i> will be replaced with:
<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
-->

<script>
  feather.replace();
</script>

You can pass feather.replace() an attrs object:

<i data-feather="circle"></i>
<!--
<i> will be replaced with:
<svg class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
-->

<script>
  feather.replace({ class: 'foo bar', 'stroke-width': 1 });
</script>

All attributes on the placeholder element (i.e. <i>) will be copied to the <svg> tag:

<i data-feather="circle" id="my-circle" class="foo bar" stroke-width="1"></i>
<!--
<i> will be replaced with:
<svg id="my-circle" class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
-->

<script>
  feather.replace();
</script>

View Source


feather.toSvg(name, [attrs]) (DEPRECATED)

[!WARNING] > feather.toSvg() is deprecated. Please use feather.icons[name].toSvg() instead.

Returns an SVG string.

Parameters

NameTypeDescription
namestringIcon name
attrs (optional)ObjectKey-value pairs in the attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar"). All default attributes on the <svg> tag can be overridden with the attrs object.

Usage

feather.toSvg('circle');
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'

feather.toSvg('circle', { 'stroke-width': 1 });
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'

feather.toSvg('circle', { class: 'foo bar' });
// '<svg class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'

View Source

Contributing

For more info on how to contribute please see the contribution guidelines.

Caught a mistake or want to contribute to the documentation? Edit this page on Github

Related projects

License

Feather is licensed under the MIT License.