DOCSEARCHbyAlgolia
Submit Docs

Feather Icons

repository·main·Indexed 12 days ago

https://github.com/feathericons/feather

A collection of simple, consistent, and flexible open-source icons designed on a 24x24 grid. Available as a client-side JavaScript library, a Node.js module (feather-icons v4.29.2), or via an SVG sprite. Features include the `feather.replace()` method for DOM element swapping and the `toSvg()` method for generating SVG strings with custom attributes.

Tokens
3.2K
Snippets
18
Records
19
Agent score
96%

What's inside Feather Icons

  1. Use Feather in client-side JavaScript

    main

    To use Feather in a web project:

    1. Include the library: Load feather.js or feather.min.js via a <script> tag from your local dist folder or a CDN.
    2. Declare icons: Add a data-feather attribute with the icon name to an HTML element.
    3. Replace elements: Call feather.replace() to transform the elements into SVG markup.
    <!-- 1. Include -->
<script src="https://unpkg.com/feather-icons"></script>

<!-- 2. Declare -->
<i data-feather="circle"></i>

<!-- 3. Replace -->
<script>
  feather.replace();
</script>

  2. Use Feather in Node.js

    main

    In a Node.js environment, you can require the package and access the icon definitions directly via the feather.icons object. Each icon object contains metadata like name, contents (the SVG path string), tags, and attrs (default attributes), as well as a toSvg() method.

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

// Access icon metadata
const icon = feather.icons.x;
console.log(icon.name); // 'x'

// Generate SVG string
const svgString = icon.toSvg();

// Generate SVG string with custom attributes
const customSvg = icon.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' });

  3. Quick start with Feather in the browser

    main

    To prototype quickly in a browser, you can use a CDN to load Feather and use the feather.replace() method to swap elements with data-feather attributes for SVG icons.

    1. Include the script via unpkg.
    2. Add an element with a data-feather attribute (e.g., <i data-feather="circle"></i>).
    3. Call feather.replace() in a script tag.
    <!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>

  5. Use Feather via SVG sprite

    main

    You can use the feather-sprite.svg file to reference icons using the <use> element. This is efficient for reducing HTTP requests.

    1. Copy feather-sprite.svg from the dist directory to your project.
    2. Reference an icon using <use href="path/to/feather-sprite.svg#icon-name" /> inside an <svg> element.
    3. (Optional) Use a CSS class to apply consistent styling to all Feather icons.
    <!-- HTML -->
<svg class="feather">
  <use href="path/to/dist/feather-sprite.svg#circle" />
</svg>

<!-- CSS -->
<style>
.feather {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
</style>

  7. Build the Feather project from source

    main

    To build the Feather project, including the icons.json metadata, the SVG sprite, individual SVG icons, and the JavaScript library, run the bin/build.sh script. This script performs the following steps:

    1. Cleans and creates the dist directory.
    2. Generates icons.json using bin/build-icons-json.js.
    3. Generates the SVG sprite using bin/build-sprite.js.
    4. Creates the dist/icons directory and generates individual SVG icons using bin/build-svgs.js.
    5. Bundles the JavaScript library into dist/feather.js (development mode) and dist/feather.min.js (production mode) using Webpack.
    ./bin/build.sh

  8. Replace `data-feather` elements with SVGs using `feather.replace()`

    main

    In a browser environment, feather.replace() scans the DOM for elements with a data-feather attribute and replaces them with the corresponding SVG markup.

    Behavior:

    • All attributes present on the placeholder element (e.g., <i data-feather="circle" id="my-id" class="my-class"></i>) will be automatically copied to the resulting <svg> tag.
    • You can also pass an attrs object to feather.replace() to apply specific attributes to all replaced icons.
    <!-- Simple replacement -->
<i data-feather="circle"></i>
<script>
  feather.replace();
</script>

<!-- Replacement with custom attributes -->
<i data-feather="circle"></i>
<script>
  feather.replace({ class: 'foo bar', 'stroke-width': 1 });
</script>

<!-- Attributes from the placeholder are preserved -->
<i data-feather="circle" id="my-circle" class="foo bar"></i>
<script>
  feather.replace();
</script>

  9. Access icon data via `feather.icons`

    main

    The feather.icons object contains metadata for every available icon. Each icon entry is an object containing its name, SVG path contents, tags, default attributes, and a toSvg method.

    Important Note on Accessing Icons:

    • For single-word icon names, use dot notation: feather.icons.x.
    • For multi-word icon names (e.g., arrow-right), you must use bracket notation: feather.icons['arrow-right'].
    // Accessing an icon object
const icon = feather.icons.x;

// Accessing a multi-word icon
const arrow = feather.icons['arrow-right'];

// Getting the raw SVG path contents as a string
const pathString = feather.icons.x.toString();

  10. Generate an SVG string with `feather.icons[name].toSvg()`

    main

    To generate a complete <svg> string for a specific icon, use the toSvg() method on the icon object. You can pass an optional attrs object to override default attributes or add new ones.

    Useful attributes to manipulate include:

    • color
    • width
    • height
    • stroke-width
    • stroke-linecap
    • stroke-linejoin
    // Default SVG
const svg = feather.icons.circle.toSvg();

// Overriding stroke-width
const customSvg = feather.icons.circle.toSvg({ 'stroke-width': 1 });

// Adding custom classes
const classedSvg = feather.icons.circle.toSvg({ class: 'foo bar' });

  11. Deprecated: Use `feather.icons[name].toSvg()` instead of `feather.toSvg()`

    main

    The feather.toSvg(name, [attrs]) method is deprecated. Developers should migrate to using the icon-specific method: feather.icons[name].toSvg([attrs]).

    // DEPRECATED
feather.toSvg('circle', { 'stroke-width': 1 });

// RECOMMENDED
feather.icons.circle.toSvg({ 'stroke-width': 1 });

  12. Generate SVG strings with Icon.toSvg()

    main

    The toSvg method generates a complete SVG string for an icon. It merges default icon attributes (like the feather feather-<name> class) with any custom attributes provided. If you provide a class attribute in the options, it will be merged with the default classes using classnames logic rather than overwriting them.

    // Assuming an Icon instance exists for 'camera'
const svgString = icon.toSvg({
  class: 'my-custom-class',
  stroke: 'red',
  'stroke-width': 2
});

// Resulting string will include both 'feather feather-camera' and 'my-custom-class'