feather-icons vs feather-icons-react vs lucide-react vs remixicon-react
Icon Libraries for React Applications
Search packages..
feather-iconsfeather-icons-reactlucide-reactremixicon-reactSimilar Packages:

Icon Libraries for React Applications

feather-icons is the original JavaScript library for simple, open-source icons. feather-icons-react is a community-maintained React wrapper for the original Feather icons. lucide-react is the actively maintained successor to Feather, offering a larger set of icons with a consistent API designed for React. remixicon-react provides React components for the Remix Icon library, which features a larger, more varied set of system and symbolic icons.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
feather-icons025,884625 kB5082 years agoMIT
feather-icons-react048498 kB35 months agoISC
lucide-react022,11629.8 MB5425 days agoISC
remixicon-react0164.58 MB12-(MIT AND OFL-1.1)

Icon Libraries for React: Feather, Lucide, and Remix Compared

When building professional React applications, icons are more than just decoration — they are critical UI elements that affect accessibility, performance, and maintainability. feather-icons, feather-icons-react, lucide-react, and remixicon-react all solve the same problem but take different approaches to implementation, maintenance, and design philosophy. Let's compare how they handle common engineering challenges.

🎨 Icon Rendering: SVG Components vs. JavaScript Replacement

feather-icons relies on JavaScript to replace HTML tags with SVGs at runtime.

  • You add <i data-feather="user"></i> to your HTML.
  • You must call feather.replace() to inject the SVGs.
  • This approach causes flickering in React apps and conflicts with the virtual DOM.
// feather-icons: Manual DOM replacement
import feather from 'feather-icons';

function App() {
  useEffect(() => {
    feather.replace(); // Required to render icons
  }, []);

  return <i data-feather="user"></i>; // Not a real React component
}

feather-icons-react wraps the original icons into React components.

  • You import specific icons as components.
  • No manual DOM replacement is needed.
  • However, it still depends on the original Feather library under the hood.
// feather-icons-react: Component-based
import { User } from 'feather-icons-react';

function App() {
  return <User size={24} color="#333" />;
}

lucide-react provides native React components without external JS dependencies.

  • Icons are pure functional components.
  • Supports props like size, color, and strokeWidth directly.
  • Optimized for tree-shaking and server-side rendering (SSR).
// lucide-react: Native React components
import { User } from 'lucide-react';

function App() {
  return <User size={24} color="#333" strokeWidth={2} />;
}

remixicon-react offers React components for the Remix Icon set.

  • Similar component API to Lucide.
  • Includes a wider variety of icon styles (filled, outlined).
  • Good for apps needing more visual variety.
// remixicon-react: Component-based
import { RiUserLine } from 'remixicon-react';

function App() {
  return <RiUserLine size={24} color="#333" />;
}

🛠️ Maintenance and Future-Proofing

feather-icons is in maintenance mode.

  • The original repository sees infrequent updates.
  • No new icons are being added.
  • Using this in new projects risks technical debt.
// feather-icons: Limited icon set
// Only ~290 icons available, no new additions expected
import feather from 'feather-icons';

feather-icons-react depends on the original Feather library.

  • Inherits the maintenance limitations of feather-icons.
  • Community-maintained wrappers may lag behind security patches.
  • Not recommended for long-term architectural stability.
// feather-icons-react: Wrapper dependency
// Still limited to the original Feather icon set
import { Activity } from 'feather-icons-react';

lucide-react is actively developed and expanded.

  • Regularly adds new icons based on community requests.
  • Maintained by a dedicated team ensuring compatibility with modern React.
  • Considered the official successor to Feather Icons.
// lucide-react: Active development
// Over 1000+ icons and growing
import { Activity, Zap, Shield } from 'lucide-react';

remixicon-react is tied to the Remix Icon project.

  • Remix Icon itself is actively maintained.
  • Offers a larger total icon count than Feather/Lucide.
  • React wrapper updates depend on community contributors.
// remixicon-react: Large library
// 2000+ icons available across different categories
import { RiRocketLine, RiGemLine } from 'remixicon-react';

⚡ Performance and Tree-Shaking

feather-icons loads the entire icon set by default.

  • You must configure it carefully to avoid bundling unused icons.
  • Can lead to larger bundle sizes if not optimized.
// feather-icons: Potential bundle bloat
import feather from 'feather-icons';
// Loads all icons unless configured otherwise
feather.replace();

feather-icons-react allows individual imports.

  • Better tree-shaking than the base library.
  • Still carries overhead from the wrapper implementation.
// feather-icons-react: Individual imports
import { User } from 'feather-icons-react';
// Only bundles the User icon

lucide-react is built for tree-shaking from the ground up.

  • Each icon is a separate export.
  • Minimal runtime overhead.
  • Works seamlessly with modern bundlers like Vite and Webpack.
// lucide-react: Optimized tree-shaking
import { User, Settings } from 'lucide-react';
// Only bundles User and Settings

remixicon-react supports individual icon imports.

  • Similar tree-shaking capabilities to Lucide.
  • Slightly larger individual icon SVGs due to design complexity.
// remixicon-react: Individual imports
import { RiUserLine } from 'remixicon-react';
// Only bundles the specific icon

♿ Accessibility and Customization

feather-icons requires manual ARIA attributes.

  • You must add aria-label or role manually to the <i> tag.
  • Easy to miss, leading to accessibility issues.
// feather-icons: Manual accessibility
<i data-feather="user" aria-label="User Profile" role="img"></i>

feather-icons-react supports props for accessibility.

  • Pass aria-label directly to the component.
  • Cleaner than manual HTML attributes.
// feather-icons-react: Props-based
<User aria-label="User Profile" />

lucide-react prioritizes accessibility defaults.

  • Encourages aria-label usage via props.
  • Consistent API across all icons makes auditing easier.
// lucide-react: Accessible by design
<User aria-label="User Profile" strokeWidth={2} />

remixicon-react follows standard React patterns.

  • Supports all standard SVG props including accessibility attributes.
  • Consistent with other React icon libraries.
// remixicon-react: Standard props
<RiUserLine aria-label="User Profile" />

🌐 Similarities: Shared Ground Between Libraries

While the differences are clear, these libraries share common goals and patterns.

1. 📐 SVG-Based Rendering

  • All libraries render icons as inline SVGs.
  • Allows CSS styling for color, size, and animation.
// All libraries support CSS styling
// lucide-react example
<User className="text-blue-500 hover:text-blue-700" />

// remixicon-react example
<RiUserLine className="text-blue-500 hover:text-blue-700" />

2. ⚛️ React Component API

  • feather-icons-react, lucide-react, and remixicon-react all use functional components.
  • Support standard React props like className, style, and onClick.
// Shared React pattern
const Icon = ({ onClick }) => (
  <User onClick={onClick} />
);

3. 🎨 Customization via Props

  • All React wrappers allow size and color customization.
  • Enables dynamic theming without multiple SVG files.
// Lucide
<User size={32} color="red" />

// RemixIcon
<RiUserLine size={32} color="red" />

4. 📦 NPM Distribution

  • All packages are distributed via npm.
  • Installable with standard package managers (npm, yarn, pnpm).
# Installation commands are similar
npm install lucide-react
npm install remixicon-react

📊 Summary: Key Similarities

FeatureShared by All React Wrappers
Rendering📐 Inline SVG
Integration⚛️ React Components
Styling🎨 CSS/Props based
Distribution📦 NPM Package
Tree-Shaking✅ Supported (except base feather)

🆚 Summary: Key Differences

Featurefeather-iconsfeather-icons-reactlucide-reactremixicon-react
Type📜 Vanilla JS⚛️ React Wrapper⚛️ Native React⚛️ React Wrapper
Maintenance⚠️ Maintenance Mode⚠️ Community Maintained✅ Active✅ Active
Icon Count📉 ~290📉 ~290📈 1000+📈 2000+
Rendering🔄 JS Replacement🧩 Component🧩 Component🧩 Component
Best For🚫 Legacy/Non-React🚫 Legacy React✅ New React Projects✅ Varied Icon Needs

💡 The Big Picture

feather-icons and feather-icons-react are legacy choices. 🕰️ Only use them if you are maintaining an existing application that already depends on them. For any new development, they introduce unnecessary risk due to their maintenance status.

lucide-react is the standard for modern React apps. 🏆 It offers the best balance of design consistency, active maintenance, and developer experience. If you liked Feather's style, Lucide is the natural upgrade.

remixicon-react is the choice for variety. 🎨 If your UI requires more than just simple stroke icons — such as filled icons, logos, or specific symbolic representations — Remix Icon provides a broader palette while maintaining good React integration.

Final Thought: Icon libraries are infrastructure. Choose the one that will still be maintained when you need to add new features two years from now. For most React teams today, that means choosing lucide-react.

How to Choose: feather-icons vs feather-icons-react vs lucide-react vs remixicon-react

  • feather-icons:

    Choose feather-icons only if you are working in a vanilla JavaScript environment or need direct DOM manipulation without a framework. It is not recommended for new React projects due to lack of native component support and the library's maintenance status.

  • feather-icons-react:

    Choose feather-icons-react if you are maintaining a legacy codebase that already depends on the specific Feather icon set and requires React components. Do not use this for new projects, as the original icon set is no longer actively expanded.

  • lucide-react:

    Choose lucide-react for any new React project requiring clean, consistent stroke icons. It is the official spiritual successor to Feather, offering better tree-shaking, TypeScript support, and a constantly growing library of icons.

  • remixicon-react:

    Choose remixicon-react if your design system requires a wider variety of icon styles (filled, outlined, symbolic) beyond simple stroke icons. It is suitable for complex dashboards or applications needing specific symbolic representations not found in minimal icon sets.

Similar Npm Packages to feather-icons

feather-icons is a collection of open-source icons that are designed to be simple, beautiful, and customizable. Each icon is crafted with a minimalistic approach, making them ideal for modern web applications. Feather icons are vector-based, which means they can be scaled to any size without losing quality, and they can easily be styled with CSS. This makes them a popular choice among developers looking for a clean and elegant icon set for their projects.

While feather-icons provides a great selection of icons, there are other libraries that offer similar functionalities. Here are a few alternatives:

  • material-icons is a set of icons designed by Google that follows the Material Design guidelines. This library includes a wide variety of icons that are perfect for web and mobile applications. Material icons are also vector-based and can be easily customized with CSS. If you are building an application that adheres to Material Design principles, using material-icons will ensure consistency and a polished look throughout your user interface.
  • react-icons is a popular library that provides a comprehensive collection of icons from various icon sets, including Font Awesome, Material Icons, and many others. This library is specifically designed for React applications, allowing developers to easily import and use icons as React components. If you need a diverse range of icons and want the flexibility to choose from multiple icon sets, react-icons is an excellent choice.

To see how feather-icons compares with material-icons and react-icons, check out the comparison: Comparing feather-icons vs material-icons vs react-icons.

Similar Npm Packages to feather-icons-react

feather-icons-react is a React component library that provides a collection of Feather icons as React components. Feather icons are known for their simplicity and clean design, making them a popular choice for modern web applications. By using feather-icons-react, developers can easily incorporate these icons into their React projects without having to worry about SVG manipulation or styling. The library allows for easy customization, enabling developers to adjust the size, color, and other properties of the icons directly through props.

While feather-icons-react is a great option for using Feather icons in React applications, there are other libraries that also provide icon components for React. Here are a few alternatives:

  • react-feather is another library that offers Feather icons as React components. It is lightweight and focuses on providing a simple API for developers. Similar to feather-icons-react, react-feather allows for easy customization of icons. However, it is worth noting that react-feather is specifically designed to be a minimalistic implementation of Feather icons, making it an excellent choice for developers who want to keep their bundle size small while still using these elegant icons.
  • react-icons is a comprehensive library that provides a wide range of icons from various icon sets, including Feather icons. It offers a unified interface for importing and using icons from different libraries, making it a versatile choice for developers who need access to multiple icon sets. With react-icons, you can easily switch between icon libraries without changing your code structure. This flexibility can be particularly useful for projects that require a diverse set of icons.

To see how feather-icons-react compares with react-feather and react-icons, check out the comparison: Comparing feather-icons-react vs react-feather vs react-icons.

Similar Npm Packages to lucide-react

lucide-react is a React component library that provides a collection of customizable icons based on the Feather Icons design. It is designed to be lightweight and easy to use, making it a great choice for developers looking to enhance their applications with beautiful and scalable icons. With lucide-react, you can easily integrate icons into your React projects while maintaining a clean and modern aesthetic.

While lucide-react is a fantastic option for iconography in React applications, there are several alternatives worth considering:

  • feather-icons is a collection of open-source icons that are designed to be simple and elegant. These icons are available in SVG format, which makes them easy to customize and scale. Feather Icons can be used in any web project, not just React, making them versatile for various applications. If you prefer to work directly with SVGs or need icons for non-React projects, feather-icons is an excellent choice.
  • feather-icons-react is a React wrapper for Feather Icons, allowing you to use the icons as React components. This library provides the same simplicity and elegance as feather-icons but is tailored specifically for React applications. If you want to leverage the Feather Icons design while enjoying the benefits of React components, feather-icons-react is a great alternative to lucide-react.
  • remixicon-react is another option for React developers looking for a comprehensive icon library. Remix Icon is a set of open-source icons designed for web applications, and the remixicon-react library allows you to easily integrate these icons into your React projects. With a wide variety of icons and a modern design, remixicon-react is a solid choice for developers seeking a different aesthetic or more icon options.

To explore how lucide-react compares with feather-icons, feather-icons-react, and remixicon-react, check out the comparison: Comparing feather-icons vs feather-icons-react vs lucide-react vs remixicon-react.

Similar Npm Packages to remixicon-react

remixicon-react is a React component library that provides a collection of beautiful and customizable icons for use in web applications. Built on top of the Remix Icon library, it allows developers to easily integrate icons into their React projects with minimal effort. While remixicon-react offers a great selection of icons, there are several alternatives available that also provide icon solutions for React applications. Here are a few notable alternatives:

  • font-awesome is one of the most popular icon libraries available. It offers a vast collection of icons that can be easily integrated into web applications. Font Awesome provides both free and premium icons, and its extensive library makes it a go-to choice for many developers. With support for various frameworks, including React, Font Awesome allows for easy customization and styling of icons, making it a versatile option for any project.
  • heroicons is a set of beautiful, hand-crafted SVG icons designed specifically for React and Vue applications. Heroicons offers a simple and elegant design aesthetic, making it a great choice for modern web applications. The library includes both outline and solid versions of each icon, allowing developers to choose the style that best fits their design needs. Its focus on simplicity and usability makes heroicons an attractive alternative for developers looking for a clean icon set.
  • material-icons is a collection of icons created by Google as part of their Material Design guidelines. These icons are designed to be simple, modern, and highly recognizable, making them suitable for a wide range of applications. Material Icons can be easily integrated into React projects, and their consistent design language ensures a cohesive look and feel across applications. This library is an excellent choice for developers who want to adhere to Material Design principles.
  • react-fontawesome is a React component library for Font Awesome icons. It allows developers to easily use Font Awesome icons in their React applications while taking advantage of React's component-based architecture. With react-fontawesome, you can easily customize icons, control their size, and apply styles directly within your React components, making it a convenient option for those already using Font Awesome.
  • react-icons is a popular library that provides a unified interface for using various icon libraries in React applications. It includes icons from multiple sources, such as Font Awesome, Material Icons, and others, allowing developers to choose from a wide range of icons without needing to install multiple libraries. React Icons simplifies the process of integrating icons into your projects and is an excellent choice for developers looking for flexibility and variety.

To explore how remixicon-react compares with these alternatives, check out the comparison: Comparing font-awesome vs heroicons vs material-icons vs react-fontawesome vs react-icons.

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.

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.