10 ms·

Feather – open source icons

532 points by vmoore 4y ago

kkkrist 4y ago
And there I was, thinking for a split-second that Feathers[1] would finally get the recognition it deserves ;-) [1] https://feathersjs.com/ https://feathersjs.com/ (Edit: Well, it kind of already did. Has massively more GitHub stars than when i last checked.)
throwaway290 4y ago
I thought moving the size slider would switch to icon versions designed with less/more detail to accommodate extreme sizes, but this is cool and since it's OSS someone might make a PR for that at some point!
s1291 4y ago
One can also use Inkscape Open Symbols [1]. [1]: https://github.com/PanderMusubi/inkscape-open-symbols https://github.com/PanderMusubi/inkscape-open-symbols
- unsafecast 4y ago
  They're surprisingly good. I've come to expect built-in icon sets, themes, etc to be terrible in just about every program.
andrewgioia 4y ago
Lucide[1] is a very active fork of Feather and what I’ve been using for the past few years instead. Feather is great as are their design guidelines, but it needs way way more icons. Lucide picks up beautifully where it left off. [1] https://lucide.dev/ https://lucide.dev/
- 867-5309 4y ago
  I wonder why signal-zero and signal-low are the same icon
  - marcosdumay 4y ago
    And signal-high is lower than signal. I guess some discretion is required before using any of those icon fonts. That's really not a point against it. Anyway, my favorite feature is that the disability guy is in a rush.
    - ComputerGuru 4y ago
      > anyway my favorite feature is that the disability guy is in a rush That’s actually a thing now: https://blog.logomyway.com/new-handicapped-logo-and-the-history/ https://blog.logomyway.com/new-handicapped-logo-and-the-hist...
      - marcosdumay 4y ago
        That's interesting. For me the rushing icon does look better. But I wonder why they didn't make the icon on a more normal position, with the body and arms closer to the resting position. We don't make signage with people running except when we actually want to say that they are going fast; the same should apply here.
        thih9 4y ago
        > I wonder why they didn't make the icon on a more normal position, with the body and arms closer to the resting position. The article linked by grandparent says: "the new design pictures a handicapped individual with their head tilted forward, indicating their mobility and that they are in control of where they are going. The new design also pictures the individual with their arms back, once again indicating that they are dynamic and in control of their own mobility."
        marcosdumay 4y ago
        Yes, but the icon should look like the person is "walking" instead of "running". Even though it is a beautiful icon, the effect is misleading. If you just reduce the inclination of the body and arms, you get that effect.
- angelmm 4y ago
  Didn't know about Lucide! Thanks for sharing
- Jaydenaus 4y ago
  Tabler-icons is also a larger set with similar design specs to feather) lucide
- KrishnaShripad 4y ago
  This looks great! Thanks for the share!
Fileformat 4y ago
Shameless self promotion: IconSear.ch[1] - instant icon search of almost 100K icons[2] from over 100 sources[3] (including feather!), linked directly to the icon source. More source ideas welcome! [1] https://iconsear.ch/search.html https://iconsear.ch/search.html [2] https://iconsear.ch/icons/index.html https://iconsear.ch/icons/index.html [3] https://iconsear.ch/sources/index.html https://iconsear.ch/sources/index.html
- aleem 4y ago
  A bit late but I have a problem with whichever icon search sites I've come across: it's hard to find a set. For example if I search Facebook, I get dozens of icons. Now how do I find the same style of icons for Twitter, etc. If you can fix that, it'll truly make you awesome.
- smetj 4y ago
  Nice!
- andyfleming 4y ago
  This is great! I'd consider making the search experience more like https://www.flaticon.com/ https://www.flaticon.com/. The drop-shadow boxes are too distracting. Adding consistent spacing will help too. I love that it's easy to get to the source, but having a page in between would be nice to see other icons from the set and information about where the icon is from.
  - Fileformat 4y ago
    Rather than an interstitial page, I'm thinking of overlay buttons (like Gmail has for attachments) for viewing info/the rest of the set/etc. I like instant search better than suggestions/autocomplete. It also works with JavaScript disabled though not instant.
- terpimost 4y ago
  it would be nice to have a filter by a type of license
sgt 4y ago
I see the symbol for saving is still a floppy disk.
- CamperBob2 4y ago
  What should it be? Serious question.
  - MerelyMortal 4y ago
    Maybe we should ask one of those AI image generators? (maybe an arrow into a folder, but then some new computer users don't even know what folders are because their systems don't show them to the users) I'm also not opposed to keeping it a floppy disk. It's okay to use outdated references for things. And it's funny to hear a kid say you have a 3d-printed save icon.
    - CamperBob2 4y ago
      DALL-E 2 yields https://i.imgur.com/B9kCRnt.png https://i.imgur.com/B9kCRnt.png for the prompt "a graphical icon used to represent saving a file". Not sure it's an improvement over the floppy disk. Other variations on the prompt tend to yield things like CF cards. Although I guess the file folder with the arrow isn't too bad. (For contemporary values of "Isn't too bad" equal to "Holy shit, this thing is starting to understand abstract concepts" a few months ago.)
  - meltedcapacitor 4y ago
    Nothing? Autosave + undo supercedes "save". The "save" operation needed to be explicit on 1980s computers because nursing the floppy controller was a stop the world operation -- a long solved problem.
    - tjoff 4y ago
      No thanks. I want writing to "disk" to be explicit. Automatically save a copy that you can recover from, sure, but let the user decide when and if to save it for real.
KineticLensman 4y ago
The Scissors icon shares a common fault with many other scissor symbols and emojis: the finger holes are too large for the blades to actually close (and thus cut). This is something that I can't now unsee, once it was pointed out to me.
- RedShift1 4y ago
  Thanks, now I can't unsee it either and will be on the lookout for it wherever I come across a scissors icon.
- account-5 4y ago
  God damn it! Why'd you have to point this out!
- philshem 4y ago
  https://wh0.github.io/2020/01/02/scissors.html https://wh0.github.io/2020/01/02/scissors.html
- wsc981 4y ago
  And most butterflies when displayed in icons and such are dead [0]. --- [0]: https://www.emilydamstra.com/please-enough-dead-butterflies/ https://www.emilydamstra.com/please-enough-dead-butterflies/
KaoruAoiShiho 4y ago
What was that project that combined every single iconset together and let you use any icon from hundreds of thousands of choices?
- GNOMES 4y ago
  nerdfonts? https://www.nerdfonts.com/ https://www.nerdfonts.com/
- cdrini 4y ago
  Iconify? I love this tool! https://iconify.design/ https://iconify.design/
- Simran-B 4y ago
  Related but with a lot less icons: https://icomoon.io/app/ https://icomoon.io/app/
- h3mb3 4y ago
  React-specific: https://react-icons.github.io/react-icons/ https://react-icons.github.io/react-icons/
  - gervwyk 4y ago
    This is also my favorite goto for icons. Also interesting to me how the repo is structured, by including a linked folder to the source repo, see packages/react-icons/src/icons .. does anyone know how to do this?
    - h3mb3 4y ago
      That's how Git submodules [1] show up on GitHub. I didn't actually know the project was using them. Interesting. As far as I know, this is an ideal use case for submodules, yet at least I've rarely encountered them in the web dev scene for some reason (well, IIRC there are some gotchas). [1] https://git-scm.com/book/en/v2/Git-Tools-Submodules https://git-scm.com/book/en/v2/Git-Tools-Submodules
dang 4y ago
Related: Feather: Open-source icons - https://news.ycombinator.com/item?id=15089916 https://news.ycombinator.com/item?id=15089916 - Aug 2017 (140 comments)
mblode 4y ago
I contributed the RSS icon[1] to Feather a few years ago. The circle shape in the RSS icon is visually denser and deviates from all other shapes in the icon set. I apologize for breaking the constraints but in my defense, it looks much nicer this way [1] https://feathericons.com/?query=rss https://feathericons.com/?query=rss
ImPleadThe5th 4y ago
I highly appreciate things like this. But honestly, it's so hard to tell the difference between all the different icon libraries. Would love to see an Html standard library for these.
- naillo 4y ago
  This basically feels like a solved problem.
nyanpasu64 4y ago
I miss color icons, but the Tango-style icons look dated in modern apps, and unfortunately DPI scaling arguably smudges colored icons more than line-based icons (even if both are vectors).
- layer8 4y ago
  Yeah, I’m missing icon libraries that actually look good on lower-DPI screens. 10-15 years ago was peak good-looking icon.
  - aorth 4y ago
    KDE's Breeze icons are SVG and look great on high DPI screens. I've used them in web projects a few times. https://github.com/KDE/breeze-icons https://github.com/KDE/breeze-icons
    - nyanpasu64 4y ago
      layer8 was asking for icons that look good on low DPI screens. Breeze'a toolbar icons are mostly monochrome, which works but IMO is missing the charm of 98's colorized icons through Vista/7's 3D icons.
- 3dGrabber 4y ago
  It’s like the whole web has come to the conclusion that icons have to be monochrome and boring. Why? What is this group-think? Why do other styles of icons “look dated”? I have nothing against the “metro” or “modern” (by m$) style per se. Like all designs it has its strengths and weaknesses. But I miss variety, Icon-sets (or websites for that matter) with personality. “metro” used to have personality, but has long since lost it because everything looks the same. Anyone here remember the silk icons? [1] I’m not arguing they are superior. But moar variety please: “silk icons”, “flat icons”, “silly icons”, “school icons”, “cartoon icons”… </rant> [1]: http://famfamfam.com/lab/icons/silk/preview.php http://famfamfam.com/lab/icons/silk/preview.php
  - nyanpasu64 4y ago
_benj 4y ago
I love these icons! Have used them in a few projects. A similar project I also enjoy using is https://heroicons.com/ https://heroicons.com/
s-xyz 4y ago
Maybe I am not getting it, but feather icons have been around for a while (I am a big fan). I am therefore surprised that nobody posted this link before. Or did they just release the website?
rnmp 4y ago
Glad to see it being featured here. Been a big fan since the beginning. Probably already mentioned before (lazy to scroll) but if you’re building something and need icons don’t just use one package. If you’re building in React or a compatible JSX library use react icons (https://react-icons.github.io/react-icons/ https://react-icons.github.io/react-icons/). It lets you pick and choose from many packs (Feather included) and if you’re careful with your selections you can meet pretty much all needs in a cohesive way. Until you can afford an in house designer :P
swyx 4y ago
my list of icon resources here: https://github.com/sw-yx/spark-joy/blob/master/README.md#icons https://github.com/sw-yx/spark-joy/blob/master/README.md#ico...
sings 4y ago
Shameless plug. My set, Microns, has fewer icons but is good for starting new projects. https://www.s-ings.com/projects/microns-icon-font/ https://www.s-ings.com/projects/microns-icon-font/ The icons are intentionally designed to not have too much personality. Less rounded and cutesy than Feather.
- txtsd 4y ago
  These are awesome!
- disqard 4y ago
  These look great! Thank you for making and sharing.
zkirill 4y ago
I’m curious how to tell if an icon pack passed any kind of i18n testing. If I remember correctly, Material Design team did lots of i18n research for their icon pack. I assume Bootstrap icons also score well, owing to the diversity of contributors (although, I’m surprised RTL landed only recently).
dvliman 4y ago
Another project by a friend of mine. Shameless promotion: https://akaricons.com/ https://akaricons.com/
mackatap 4y ago
Throwing my favorite set of icons out there: font awesome
geniium 4y ago
Always good to have theses, thanks for the work!
geniium 4y ago
It's always nice to get these, and I appreciate your efforts.
dspillett 4y ago
I've been using icons from remix for a few bits & bobs: https://remixicon.com/ https://remixicon.com/ (https://github.com/Remix-Design/RemixIcon https://github.com/Remix-Design/RemixIcon) Contains more than many similar iconsets, though hasn't seen any updates in quite a while.
vladstudio 4y ago
My favourite open source icon set these days is - https://phosphoricons.com/ https://phosphoricons.com/
throwaway743 4y ago
https://thenounproject.com/ https://thenounproject.com/
augasur 4y ago
Looks great. Might use them in my future projects. Currently I have been using Material Design Icons [0] for its broad icon gallery. [0] https://materialdesignicons.com/ https://materialdesignicons.com/

532 points by vmoore 4y ago

And there I was, thinking for a split-second that Feathers[1] would finally get the recognition it deserves ;-) [1] https://feathersjs.com/ https://feathersjs.com/ (Edit: Well, it kind of already did. Has massively more GitHub stars than when i last checked.)

throwaway290 4y ago

I thought moving the size slider would switch to icon versions designed with less/more detail to accommodate extreme sizes, but this is cool and since it's OSS someone might make a PR for that at some point!

s1291 4y ago

One can also use Inkscape Open Symbols [1]. [1]: https://github.com/PanderMusubi/inkscape-open-symbols https://github.com/PanderMusubi/inkscape-open-symbols

unsafecast 4y ago
They're surprisingly good. I've come to expect built-in icon sets, themes, etc to be terrible in just about every program.

andrewgioia 4y ago

Lucide[1] is a very active fork of Feather and what I’ve been using for the past few years instead. Feather is great as are their design guidelines, but it needs way way more icons. Lucide picks up beautifully where it left off. [1] https://lucide.dev/ https://lucide.dev/

867-5309 4y ago
I wonder why signal-zero and signal-low are the same icon
- marcosdumay 4y ago
  And signal-high is lower than signal. I guess some discretion is required before using any of those icon fonts. That's really not a point against it. Anyway, my favorite feature is that the disability guy is in a rush.
  - ComputerGuru 4y ago
    > anyway my favorite feature is that the disability guy is in a rush That’s actually a thing now: https://blog.logomyway.com/new-handicapped-logo-and-the-history/ https://blog.logomyway.com/new-handicapped-logo-and-the-hist...
    - marcosdumay 4y ago
      That's interesting. For me the rushing icon does look better. But I wonder why they didn't make the icon on a more normal position, with the body and arms closer to the resting position. We don't make signage with people running except when we actually want to say that they are going fast; the same should apply here.
      - thih9 4y ago
        > I wonder why they didn't make the icon on a more normal position, with the body and arms closer to the resting position. The article linked by grandparent says: "the new design pictures a handicapped individual with their head tilted forward, indicating their mobility and that they are in control of where they are going. The new design also pictures the individual with their arms back, once again indicating that they are dynamic and in control of their own mobility."
        marcosdumay 4y ago
        Yes, but the icon should look like the person is "walking" instead of "running". Even though it is a beautiful icon, the effect is misleading. If you just reduce the inclination of the body and arms, you get that effect.
angelmm 4y ago
Didn't know about Lucide! Thanks for sharing
Jaydenaus 4y ago
Tabler-icons is also a larger set with similar design specs to feather) lucide
KrishnaShripad 4y ago
This looks great! Thanks for the share!

Fileformat 4y ago

Shameless self promotion: IconSear.ch[1] - instant icon search of almost 100K icons[2] from over 100 sources[3] (including feather!), linked directly to the icon source. More source ideas welcome! [1] https://iconsear.ch/search.html https://iconsear.ch/search.html [2] https://iconsear.ch/icons/index.html https://iconsear.ch/icons/index.html [3] https://iconsear.ch/sources/index.html https://iconsear.ch/sources/index.html

aleem 4y ago
A bit late but I have a problem with whichever icon search sites I've come across: it's hard to find a set. For example if I search Facebook, I get dozens of icons. Now how do I find the same style of icons for Twitter, etc. If you can fix that, it'll truly make you awesome.
smetj 4y ago
Nice!
andyfleming 4y ago
This is great! I'd consider making the search experience more like https://www.flaticon.com/ https://www.flaticon.com/. The drop-shadow boxes are too distracting. Adding consistent spacing will help too. I love that it's easy to get to the source, but having a page in between would be nice to see other icons from the set and information about where the icon is from.
- Fileformat 4y ago
  Rather than an interstitial page, I'm thinking of overlay buttons (like Gmail has for attachments) for viewing info/the rest of the set/etc. I like instant search better than suggestions/autocomplete. It also works with JavaScript disabled though not instant.
terpimost 4y ago
it would be nice to have a filter by a type of license

sgt 4y ago

I see the symbol for saving is still a floppy disk.

CamperBob2 4y ago
What should it be? Serious question.
- MerelyMortal 4y ago
  Maybe we should ask one of those AI image generators? (maybe an arrow into a folder, but then some new computer users don't even know what folders are because their systems don't show them to the users) I'm also not opposed to keeping it a floppy disk. It's okay to use outdated references for things. And it's funny to hear a kid say you have a 3d-printed save icon.
  - CamperBob2 4y ago
    DALL-E 2 yields https://i.imgur.com/B9kCRnt.png https://i.imgur.com/B9kCRnt.png for the prompt "a graphical icon used to represent saving a file". Not sure it's an improvement over the floppy disk. Other variations on the prompt tend to yield things like CF cards. Although I guess the file folder with the arrow isn't too bad. (For contemporary values of "Isn't too bad" equal to "Holy shit, this thing is starting to understand abstract concepts" a few months ago.)
- meltedcapacitor 4y ago
  Nothing? Autosave + undo supercedes "save". The "save" operation needed to be explicit on 1980s computers because nursing the floppy controller was a stop the world operation -- a long solved problem.
  - tjoff 4y ago
    No thanks. I want writing to "disk" to be explicit. Automatically save a copy that you can recover from, sure, but let the user decide when and if to save it for real.

KineticLensman 4y ago

The Scissors icon shares a common fault with many other scissor symbols and emojis: the finger holes are too large for the blades to actually close (and thus cut). This is something that I can't now unsee, once it was pointed out to me.

RedShift1 4y ago
Thanks, now I can't unsee it either and will be on the lookout for it wherever I come across a scissors icon.
account-5 4y ago
God damn it! Why'd you have to point this out!
philshem 4y ago
https://wh0.github.io/2020/01/02/scissors.html https://wh0.github.io/2020/01/02/scissors.html
wsc981 4y ago
And most butterflies when displayed in icons and such are dead [0]. --- [0]: https://www.emilydamstra.com/please-enough-dead-butterflies/ https://www.emilydamstra.com/please-enough-dead-butterflies/

KaoruAoiShiho 4y ago

What was that project that combined every single iconset together and let you use any icon from hundreds of thousands of choices?

GNOMES 4y ago
nerdfonts? https://www.nerdfonts.com/ https://www.nerdfonts.com/
cdrini 4y ago
Iconify? I love this tool! https://iconify.design/ https://iconify.design/
Simran-B 4y ago
Related but with a lot less icons: https://icomoon.io/app/ https://icomoon.io/app/
h3mb3 4y ago
React-specific: https://react-icons.github.io/react-icons/ https://react-icons.github.io/react-icons/
- gervwyk 4y ago
  This is also my favorite goto for icons. Also interesting to me how the repo is structured, by including a linked folder to the source repo, see packages/react-icons/src/icons .. does anyone know how to do this?
  - h3mb3 4y ago
    That's how Git submodules [1] show up on GitHub. I didn't actually know the project was using them. Interesting. As far as I know, this is an ideal use case for submodules, yet at least I've rarely encountered them in the web dev scene for some reason (well, IIRC there are some gotchas). [1] https://git-scm.com/book/en/v2/Git-Tools-Submodules https://git-scm.com/book/en/v2/Git-Tools-Submodules

dang 4y ago

Related: Feather: Open-source icons - https://news.ycombinator.com/item?id=15089916 https://news.ycombinator.com/item?id=15089916 - Aug 2017 (140 comments)

mblode 4y ago

I contributed the RSS icon[1] to Feather a few years ago. The circle shape in the RSS icon is visually denser and deviates from all other shapes in the icon set. I apologize for breaking the constraints but in my defense, it looks much nicer this way [1] https://feathericons.com/?query=rss https://feathericons.com/?query=rss

ImPleadThe5th 4y ago

I highly appreciate things like this. But honestly, it's so hard to tell the difference between all the different icon libraries. Would love to see an Html standard library for these.

naillo 4y ago
This basically feels like a solved problem.

nyanpasu64 4y ago

I miss color icons, but the Tango-style icons look dated in modern apps, and unfortunately DPI scaling arguably smudges colored icons more than line-based icons (even if both are vectors).

layer8 4y ago
Yeah, I’m missing icon libraries that actually look good on lower-DPI screens. 10-15 years ago was peak good-looking icon.
- aorth 4y ago
  KDE's Breeze icons are SVG and look great on high DPI screens. I've used them in web projects a few times. https://github.com/KDE/breeze-icons https://github.com/KDE/breeze-icons
  - nyanpasu64 4y ago
    layer8 was asking for icons that look good on low DPI screens. Breeze'a toolbar icons are mostly monochrome, which works but IMO is missing the charm of 98's colorized icons through Vista/7's 3D icons.
3dGrabber 4y ago
It’s like the whole web has come to the conclusion that icons have to be monochrome and boring. Why? What is this group-think? Why do other styles of icons “look dated”? I have nothing against the “metro” or “modern” (by m$) style per se. Like all designs it has its strengths and weaknesses. But I miss variety, Icon-sets (or websites for that matter) with personality. “metro” used to have personality, but has long since lost it because everything looks the same. Anyone here remember the silk icons? [1] I’m not arguing they are superior. But moar variety please: “silk icons”, “flat icons”, “silly icons”, “school icons”, “cartoon icons”… </rant> [1]: http://famfamfam.com/lab/icons/silk/preview.php http://famfamfam.com/lab/icons/silk/preview.php
- nyanpasu64 4y ago

_benj 4y ago

I love these icons! Have used them in a few projects. A similar project I also enjoy using is https://heroicons.com/ https://heroicons.com/

s-xyz 4y ago

Maybe I am not getting it, but feather icons have been around for a while (I am a big fan). I am therefore surprised that nobody posted this link before. Or did they just release the website?

rnmp 4y ago

Glad to see it being featured here. Been a big fan since the beginning. Probably already mentioned before (lazy to scroll) but if you’re building something and need icons don’t just use one package. If you’re building in React or a compatible JSX library use react icons (https://react-icons.github.io/react-icons/ https://react-icons.github.io/react-icons/). It lets you pick and choose from many packs (Feather included) and if you’re careful with your selections you can meet pretty much all needs in a cohesive way. Until you can afford an in house designer :P

swyx 4y ago

my list of icon resources here: https://github.com/sw-yx/spark-joy/blob/master/README.md#icons https://github.com/sw-yx/spark-joy/blob/master/README.md#ico...

sings 4y ago

Shameless plug. My set, Microns, has fewer icons but is good for starting new projects. https://www.s-ings.com/projects/microns-icon-font/ https://www.s-ings.com/projects/microns-icon-font/ The icons are intentionally designed to not have too much personality. Less rounded and cutesy than Feather.

txtsd 4y ago
These are awesome!
disqard 4y ago
These look great! Thank you for making and sharing.

zkirill 4y ago

I’m curious how to tell if an icon pack passed any kind of i18n testing. If I remember correctly, Material Design team did lots of i18n research for their icon pack. I assume Bootstrap icons also score well, owing to the diversity of contributors (although, I’m surprised RTL landed only recently).

dvliman 4y ago

Another project by a friend of mine. Shameless promotion: https://akaricons.com/ https://akaricons.com/

mackatap 4y ago

Throwing my favorite set of icons out there: font awesome

geniium 4y ago

Always good to have theses, thanks for the work!

geniium 4y ago

It's always nice to get these, and I appreciate your efforts.

dspillett 4y ago

I've been using icons from remix for a few bits & bobs: https://remixicon.com/ https://remixicon.com/ (https://github.com/Remix-Design/RemixIcon https://github.com/Remix-Design/RemixIcon) Contains more than many similar iconsets, though hasn't seen any updates in quite a while.

vladstudio 4y ago

My favourite open source icon set these days is - https://phosphoricons.com/ https://phosphoricons.com/

throwaway743 4y ago

https://thenounproject.com/ https://thenounproject.com/

augasur 4y ago

Looks great. Might use them in my future projects. Currently I have been using Material Design Icons [0] for its broad icon gallery. [0] https://materialdesignicons.com/ https://materialdesignicons.com/