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.
yarn add feather-icons # or npm i feather-icons
Or for React.js (docs here) with this command:
yarn add react-feather # or npm i react-feather
Feather can be used in almost everywhere. Click here to see all supported environments.
Because icons are SVGs, you can add classes like
class="icon-lg" to style them. In your CSS,
write rules for the corresponding classes,
.icon-lg. All icons have a 1:1 aspect ratio, so their
height should be the same.
If you use Tailwind CSS, you can add
class="w-6 h-6" for
class="w-8 h-8" for
Another trick you can use is
style="width: 1em; height: 1em;". This means that an icon will assume the
height of the parent element’s
font-size, which by default is
16px. If the parent element’s
your icon will also appear as
You can always extract this pattern as a CSS class so you don't need to repeat yourself.
You are welcome to submit a pull request to enhance the docs, add translations, and contribute examples.