Feather icons

Feather is a small open-source set of 287 outline icons, created by Cole Bemis. Its simple, airy look became very popular, and it later gave rise to Lucide.

Open this set in Icon Library

Other sets: Lucide · Bootstrap Icons · Emoji

A sample of the set

• home
• search
• settings
• user
• users
• mail
• bell
• calendar
• camera
• image
• file
• folder
• download
• upload
• share-2
• link
• trash-2
• edit-2
• plus
• check
• x
• menu
• arrow-right
• arrow-left
• chevron-down
• star
• heart
• shopping-cart
• credit-card
• globe
• map-pin
• phone
• message-circle
• lock
• eye
• clock
• sun
• moon
• code
• terminal
• database
• cloud
• send
• bookmark
• filter

Why a small set can be an advantage

Feather covers the common needs of an interface: navigation, actions, files, communication and media. With fewer icons, it is quicker to find one, and the set stays visually uniform because it was drawn as a whole. Each icon uses a 24×24 grid and a 2-unit stroke with no fill, like Lucide.

The limit is just as clear: for a specific subject, such as finance or medicine, the icon you need may not exist. Check the set against your list of needs before you commit to it, because changing sets later means reviewing every screen.

License

Feather uses the MIT license: you can use and modify the icons in personal and commercial projects. Keep the license notice when you redistribute the package.

Using it in a project

The simplest way is to paste the SVG of each icon you need.

The official package can also replace placeholders on the page:

npm install feather-icons

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

    import feather from "feather-icons";
    feather.replace();

This runs in the browser after the page loads, so the icons appear a moment later. Pasted SVG doesn't have this delay, which is one more reason to prefer it when you only use a few icons.

Feather or Lucide?

Starting a new project and unsure which you'll need? Lucide is the safer choice, because it has far more icons in nearly the same style. Feather is still a good fit for a small interface, or for a project that already uses it. Since the two styles match closely, an icon from one usually sits well beside the other, but compare them at your actual size before mixing.

Editing an icon

If an icon is almost what you need, you don't have to redraw it. Open it in the Icon Library editor with the pencil on its card, move its points or combine it with another icon, and copy the result. Check the license of the set you started from if you plan to redistribute it.