| 1 | # Feather
|
| 2 |
|
| 3 | [](https://codecov.io/gh/feathericons/feather)
|
| 4 | [](https://www.npmjs.com/package/feather-icons)
|
| 5 | [](https://www.npmjs.com/package/feather-icons)
|
| 6 | [](https://cdnjs.com/libraries/feather-icons)
|
| 7 |
|
| 8 | ## What is Feather?
|
| 9 |
|
| 10 | 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.
|
| 11 |
|
| 12 | https://feathericons.com
|
| 13 |
|
| 14 | ```shell
|
| 15 | npm install feather-icons
|
| 16 | ```
|
| 17 |
|
| 18 | ## Table of contents
|
| 19 |
|
| 20 | - [Quick start](#quick-start)
|
| 21 | - [Usage](#usage)
|
| 22 | - [Client-side JavaScript](#client-side-javascript)
|
| 23 | - [Node](#node)
|
| 24 | - [SVG sprite](#svg-sprite)
|
| 25 | - [Figma](#figma)
|
| 26 | - [API reference](#api-reference)
|
| 27 | - [`feather.icons`](#feathericons)
|
| 28 | - [`feather.icons[name].toSvg()`](#feathericonsnametosvgattrs)
|
| 29 | - [`feather.replace()`](#featherreplaceattrs)
|
| 30 | - [`feather.toSvg()` (DEPRECATED) ](#feathertosvgname-attrs-deprecated)
|
| 31 | - [Contributing](#contributing)
|
| 32 | - [Related projects](#related-projects)
|
| 33 | - [License](#license)
|
| 34 |
|
| 35 | ## Quick start
|
| 36 |
|
| 37 | Start with this [CodePen Template](https://codepen.io/pen?template=WOJZdM) to begin prototyping with Feather in the browser.
|
| 38 |
|
| 39 | Or copy and paste the following code snippet into a blank `html` file.
|
| 40 |
|
| 41 | ```html
|
| 42 | <!DOCTYPE html>
|
| 43 | <html lang="en">
|
| 44 | <title></title>
|
| 45 | <script src="https://unpkg.com/feather-icons"></script>
|
| 46 | <body>
|
| 47 | <!-- example icon -->
|
| 48 | <i data-feather="circle"></i>
|
| 49 |
|
| 50 | <script>
|
| 51 | feather.replace();
|
| 52 | </script>
|
| 53 | </body>
|
| 54 | </html>
|
| 55 | ```
|
| 56 |
|
| 57 | ## Usage
|
| 58 |
|
| 59 | At its core, Feather is a collection of [SVG](https://svgontheweb.com/#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](https://svgontheweb.com/#implementation)
|
| 60 |
|
| 61 | The following are additional ways you can use Feather.
|
| 62 |
|
| 63 | ### Client-side JavaScript
|
| 64 |
|
| 65 | #### 1. Install
|
| 66 |
|
| 67 | > [!NOTE]
|
| 68 | > If you intend to use Feather with a CDN, you can skip this installation step.
|
| 69 |
|
| 70 | Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm).
|
| 71 |
|
| 72 | ```shell
|
| 73 | npm install feather-icons --save
|
| 74 | ```
|
| 75 |
|
| 76 | Or just copy [`feather.js`](https://unpkg.com/feather-icons/dist/feather.js) or [`feather.min.js`](https://unpkg.com/feather-icons/dist/feather.min.js) into your project directory. You don't need both `feather.js` and `feather.min.js`.
|
| 77 |
|
| 78 | #### 2. Include
|
| 79 |
|
| 80 | Include `feather.js` or `feather.min.js` with a `<script>` tag:
|
| 81 |
|
| 82 | ```html
|
| 83 | <script src="path/to/dist/feather.js"></script>
|
| 84 | ```
|
| 85 |
|
| 86 | > [!NOTE] > `feather.js` and `feather.min.js` are located in the `dist` directory of the npm package.
|
| 87 |
|
| 88 | Or load the script from a CDN provider:
|
| 89 |
|
| 90 | ```html
|
| 91 | <!-- choose one -->
|
| 92 | <script src="https://unpkg.com/feather-icons"></script>
|
| 93 | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 94 | ```
|
| 95 |
|
| 96 | After including the script, `feather` will be available as a global variable.
|
| 97 |
|
| 98 | #### 3. Use
|
| 99 |
|
| 100 | To use an icon on your page, add a `data-feather` attribute with the icon name to an element:
|
| 101 |
|
| 102 | ```html
|
| 103 | <i data-feather="circle"></i>
|
| 104 | ```
|
| 105 |
|
| 106 | See the complete list of icons at [feathericons.com](https://feathericons.com).
|
| 107 |
|
| 108 | #### 4. Replace
|
| 109 |
|
| 110 | Call the `feather.replace()` method:
|
| 111 |
|
| 112 | ```html
|
| 113 | <script>
|
| 114 | feather.replace();
|
| 115 | </script>
|
| 116 | ```
|
| 117 |
|
| 118 | 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](#api-reference) for more information about `feather.replace()`.
|
| 119 |
|
| 120 | ### Node
|
| 121 |
|
| 122 | #### 1. Install
|
| 123 |
|
| 124 | Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm):
|
| 125 |
|
| 126 | ```shell
|
| 127 | npm install feather-icons --save
|
| 128 | ```
|
| 129 |
|
| 130 | #### 2. Require
|
| 131 |
|
| 132 | ```js
|
| 133 | const feather = require('feather-icons');
|
| 134 | ```
|
| 135 |
|
| 136 | #### 3. Use
|
| 137 |
|
| 138 | ```js
|
| 139 | feather.icons.x;
|
| 140 | // {
|
| 141 | // name: 'x',
|
| 142 | // contents: '<line ... /><line ... />`,
|
| 143 | // tags: ['cancel', 'close', 'delete', 'remove'],
|
| 144 | // attrs: {
|
| 145 | // class: 'feather feather-x',
|
| 146 | // xmlns: 'http://www.w3.org/2000/svg',
|
| 147 | // width: 24,
|
| 148 | // height: 24,
|
| 149 | // viewBox: '0 0 24 24',
|
| 150 | // fill: 'none',
|
| 151 | // stroke: 'currentColor',
|
| 152 | // 'stroke-width': 2,
|
| 153 | // 'stroke-linecap': 'round',
|
| 154 | // 'stroke-linejoin': 'round',
|
| 155 | // },
|
| 156 | // toSvg: [Function],
|
| 157 | // }
|
| 158 |
|
| 159 | feather.icons.x.toSvg();
|
| 160 | // <svg class="feather feather-x" ...><line ... /><line ... /></svg>
|
| 161 |
|
| 162 | feather.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' });
|
| 163 | // <svg class="feather feather-x foo bar" stroke-width="1" color="red" ...><line ... /><line ... /></svg>
|
| 164 | ```
|
| 165 |
|
| 166 | See the [API Reference](#api-reference) for more information about the available properties and methods of the `feather` object.
|
| 167 |
|
| 168 | ### SVG sprite
|
| 169 |
|
| 170 | #### 1. Install
|
| 171 |
|
| 172 | > [!NOTE]
|
| 173 | > If you intend to use Feather with a CDN, you can skip this installation step.
|
| 174 |
|
| 175 | Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm).
|
| 176 |
|
| 177 | ```shell
|
| 178 | npm install feather-icons --save
|
| 179 | ```
|
| 180 |
|
| 181 | Or just copy [`feather-sprite.svg`](https://unpkg.com/feather-icons/dist/feather-sprite.svg) into your project directory.
|
| 182 |
|
| 183 | #### 2. Use
|
| 184 |
|
| 185 | Include an icon on your page with the following markup:
|
| 186 |
|
| 187 | ```html
|
| 188 | <svg
|
| 189 | width="24"
|
| 190 | height="24"
|
| 191 | fill="none"
|
| 192 | stroke="currentColor"
|
| 193 | stroke-width="2"
|
| 194 | stroke-linecap="round"
|
| 195 | stroke-linejoin="round"
|
| 196 | >
|
| 197 | <use href="path/to/feather-sprite.svg#circle" />
|
| 198 | </svg>
|
| 199 | ```
|
| 200 |
|
| 201 | > [!NOTE] > `circle` in the above example can be replaced with any valid icon name. See the complete list of icon names at [feathericons.com](https://feathericons.com).
|
| 202 |
|
| 203 | However, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons:
|
| 204 |
|
| 205 | ```css
|
| 206 | .feather {
|
| 207 | width: 24px;
|
| 208 | height: 24px;
|
| 209 | stroke: currentColor;
|
| 210 | stroke-width: 2;
|
| 211 | stroke-linecap: round;
|
| 212 | stroke-linejoin: round;
|
| 213 | fill: none;
|
| 214 | }
|
| 215 | ```
|
| 216 |
|
| 217 | ```html
|
| 218 | <svg class="feather">
|
| 219 | <use href="path/to/dist/feather-sprite.svg#circle" />
|
| 220 | </svg>
|
| 221 | ```
|
| 222 |
|
| 223 | ### Figma
|
| 224 |
|
| 225 | Feather is available as a [Figma component library](https://www.figma.com/file/dyJRSFTIajik4cdkcXN8yA3K/Feather-Component-Library). To use the components, log in to your Figma account and **duplicate** the file to your drafts.
|
| 226 |
|
| 227 | ## API reference
|
| 228 |
|
| 229 | ### `feather.icons`
|
| 230 |
|
| 231 | An object with data about every icon.
|
| 232 |
|
| 233 | #### Usage
|
| 234 |
|
| 235 | ```js
|
| 236 | feather.icons.x;
|
| 237 | // {
|
| 238 | // name: 'x',
|
| 239 | // contents: '<line ... /><line ... />',
|
| 240 | // tags: ['cancel', 'close', 'delete', 'remove'],
|
| 241 | // attrs: {
|
| 242 | // class: 'feather feather-x',
|
| 243 | // xmlns: 'http://www.w3.org/2000/svg',
|
| 244 | // width: 24,
|
| 245 | // height: 24,
|
| 246 | // viewBox: '0 0 24 24',
|
| 247 | // fill: 'none',
|
| 248 | // stroke: 'currentColor',
|
| 249 | // 'stroke-width': 2,
|
| 250 | // 'stroke-linecap': 'round',
|
| 251 | // 'stroke-linejoin': 'round',
|
| 252 | // },
|
| 253 | // toSvg: [Function],
|
| 254 | // }
|
| 255 |
|
| 256 | feather.icons.x.toString();
|
| 257 | // '<line ... /><line ... />'
|
| 258 | ```
|
| 259 |
|
| 260 | > [!NOTE] > `x` in the above example can be replaced with any valid icon name. See the complete list of icon names at [feathericons.com](https://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']`).
|
| 261 |
|
| 262 | [View Source](https://github.com/feathericons/feather/blob/master/src/icons.js)
|
| 263 |
|
| 264 | ---
|
| 265 |
|
| 266 | ### `feather.icons[name].toSvg([attrs])`
|
| 267 |
|
| 268 | Returns an SVG string.
|
| 269 |
|
| 270 | #### Parameters
|
| 271 |
|
| 272 | | Name | Type | Description |
|
| 273 | | ------------------ | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| 274 | | `attrs` (optional) | Object | Key-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. |
|
| 275 |
|
| 276 | > [!NOTE]
|
| 277 | > You might find these SVG attributes helpful for manipulating icons:
|
| 278 | >
|
| 279 | > - [`color`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/color)
|
| 280 | > - [`width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width)
|
| 281 | > - [`height`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/height)
|
| 282 | > - [`stroke-width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width)
|
| 283 | > - [`stroke-linecap`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap)
|
| 284 | > - [`stroke-linejoin`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin)
|
| 285 |
|
| 286 | #### Usage
|
| 287 |
|
| 288 | ```js
|
| 289 | feather.icons.circle.toSvg();
|
| 290 | // '<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>'
|
| 291 |
|
| 292 | feather.icons.circle.toSvg({ 'stroke-width': 1 });
|
| 293 | // '<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>'
|
| 294 |
|
| 295 | feather.icons.circle.toSvg({ class: 'foo bar' });
|
| 296 | // '<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>'
|
| 297 | ```
|
| 298 |
|
| 299 | [View Source](https://github.com/feathericons/feather/blob/master/src/icon.js)
|
| 300 |
|
| 301 | ---
|
| 302 |
|
| 303 | ### `feather.replace([attrs])`
|
| 304 |
|
| 305 | Replaces all elements that have a `data-feather` attribute with SVG markup corresponding to the element's `data-feather` attribute value.
|
| 306 |
|
| 307 | #### Parameters
|
| 308 |
|
| 309 | | Name | Type | Description |
|
| 310 | | ------------------ | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| 311 | | `attrs` (optional) | Object | Key-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. |
|
| 312 |
|
| 313 | #### Usage
|
| 314 |
|
| 315 | > [!IMPORTANT] > `feather.replace()` only works in a browser environment.
|
| 316 |
|
| 317 | Simple usage:
|
| 318 |
|
| 319 | ```html
|
| 320 | <i data-feather="circle"></i>
|
| 321 | <!--
|
| 322 | <i> will be replaced with:
|
| 323 | <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>
|
| 324 | -->
|
| 325 |
|
| 326 | <script>
|
| 327 | feather.replace();
|
| 328 | </script>
|
| 329 | ```
|
| 330 |
|
| 331 | You can pass `feather.replace()` an `attrs` object:
|
| 332 |
|
| 333 | ```html
|
| 334 | <i data-feather="circle"></i>
|
| 335 | <!--
|
| 336 | <i> will be replaced with:
|
| 337 | <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>
|
| 338 | -->
|
| 339 |
|
| 340 | <script>
|
| 341 | feather.replace({ class: 'foo bar', 'stroke-width': 1 });
|
| 342 | </script>
|
| 343 | ```
|
| 344 |
|
| 345 | All attributes on the placeholder element (i.e. `<i>`) will be copied to the `<svg>` tag:
|
| 346 |
|
| 347 | ```html
|
| 348 | <i data-feather="circle" id="my-circle" class="foo bar" stroke-width="1"></i>
|
| 349 | <!--
|
| 350 | <i> will be replaced with:
|
| 351 | <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>
|
| 352 | -->
|
| 353 |
|
| 354 | <script>
|
| 355 | feather.replace();
|
| 356 | </script>
|
| 357 | ```
|
| 358 |
|
| 359 | [View Source](https://github.com/feathericons/feather/blob/master/src/replace.js)
|
| 360 |
|
| 361 | ---
|
| 362 |
|
| 363 | ### `feather.toSvg(name, [attrs])` (DEPRECATED)
|
| 364 |
|
| 365 | > [!WARNING] > `feather.toSvg()` is deprecated. Please use `feather.icons[name].toSvg()` instead.
|
| 366 |
|
| 367 | Returns an SVG string.
|
| 368 |
|
| 369 | #### Parameters
|
| 370 |
|
| 371 | | Name | Type | Description |
|
| 372 | | ------------------ | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| 373 | | `name` | string | Icon name |
|
| 374 | | `attrs` (optional) | Object | Key-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. |
|
| 375 |
|
| 376 | #### Usage
|
| 377 |
|
| 378 | ```js
|
| 379 | feather.toSvg('circle');
|
| 380 | // '<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>'
|
| 381 |
|
| 382 | feather.toSvg('circle', { 'stroke-width': 1 });
|
| 383 | // '<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>'
|
| 384 |
|
| 385 | feather.toSvg('circle', { class: 'foo bar' });
|
| 386 | // '<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>'
|
| 387 | ```
|
| 388 |
|
| 389 | [View Source](https://github.com/feathericons/feather/blob/master/src/to-svg.js)
|
| 390 |
|
| 391 | ## Contributing
|
| 392 |
|
| 393 | For more info on how to contribute please see the [contribution guidelines](https://github.com/feathericons/feather/blob/master/CONTRIBUTING.md).
|
| 394 |
|
| 395 | Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/feathericons/feather/blob/master/README.md)
|
| 396 |
|
| 397 | ## Related projects
|
| 398 |
|
| 399 | - [feathericons.dev](http://feathericons.dev) - Feather viewer featuring [30+ brand icons](https://feathericons.dev/?iconset=brands) and [40+ payment services icons](https://feathericons.dev/?iconset=payments)
|
| 400 | - [angular-feather](https://github.com/michaelbazos/angular-feather) - Feather icons for Angular applications
|
| 401 | - [elm-feather](https://github.com/1602/elm-feather) - Feather icons for Elm applications
|
| 402 | - [react-feather](https://github.com/carmelopullara/react-feather) - Feather icons as React components
|
| 403 | - [sketch-feather](https://github.com/odmln/sketch-feather) - Feather icons as a Sketch library
|
| 404 | - [vue-feather-icons](https://github.com/egoist/vue-feather-icons) - Feather icons as Vue components
|
| 405 | - [php-feather](https://github.com/Pixelrobin/php-feather) - Feather icons as a PHP Library
|
| 406 | - [wp-php-feather](https://github.com/reatlat/wp-php-feather) - Feather icons as a WordPress template tag
|
| 407 | - [django-feather](https://pypi.org/project/django-feather/) - Feather icons as Django Template Tag
|
| 408 | - [svelte-feather-icons](https://github.com/dylanblokhuis/svelte-feather-icons) - Feather icons as Svelte components
|
| 409 | - [gulp-feather](https://github.com/oToToT/gulp-feather) - Feather icons rendering using gulp
|
| 410 | - [astro-feather](https://github.com/gabrlyg/astro-feather) - Feather icons as Astro components
|
| 411 | - [qwik-feather-icons](https://github.com/yeyon/qwik-feather-icons) - Feather icons for Qwik, the Resumable Framework
|
| 412 | - [figma-feather](https://github.com/kevintoepfer/figma-feather) – Feather icons as a Figma component
|
| 413 | - [delphi-feather-icons](https://github.com/shaunroselt/Delphi-Feather-Icons) - Feather icons as a Delphi Library
|
| 414 | - [eleventy-plugin-feathericons](https://github.com/reatlat/eleventy-plugin-feathericons) - Feather icons as a plugin for [11ty](https://github.com/11ty/eleventy)
|
| 415 |
|
| 416 | ## License
|
| 417 |
|
| 418 | Feather is licensed under the [MIT License](https://github.com/feathericons/feather/blob/master/LICENSE).
|