Feather: Open-source icons

by mcone • 9 years ago

844 140 9 years ago

bubaflub• 9 years ago

From https://github.com/colebemis/feather/blob/master/README.md#l...:

  License
  
  Feather is licensed under the MIT License.

criddell• 9 years ago

Are the trademarked icons (Github, Slack, maybe others) also covered by the MIT License?

wongarsu2• 9 years ago

I'm not a trademark lawyer, but to me the icons look generic enough that they shouldn't cause trouble unless you use them as logo for a competing service.

joepie91_2• 9 years ago

This is answered here: https://news.ycombinator.com/item?id=15091742

jannes3• 9 years ago

I really like that these are SVG icons with a minimal amount of paths rather than an icon font.

ringaroundthetx• 9 years ago

I understand this is not inherently presented here as any particular solution or competitor, although its presence here elevates it as such, so why use this or do this instead of using the library at thenounproject.com ?

xeromal• 9 years ago

Variety is the spice of life.

astine• 9 years ago

This is the only reason necessary, really. Yeah, every website could use the same amazing icon set but it would get samey after a while. Having some different icon sets to pick from is nice.

woodrowbarlow3• 9 years ago

feather has a consistent style and the MIT license. for some projects that might be important.

ocdtrekkie• 9 years ago

One of the challenges I often find is in licensing/copyright. Some Creative Commons attribution requirements can be a pain, for instance, rather than something that's simply MIT like my code. I don't mind a license file in a repository, but anything that says I have to include a credit line somewhere in the end product is off-putting. Some places offer free icons, but if you modify it... say, by changing the color of the icon or converting it's format, you may be violating their terms.

So I'm always up for a clearly-defined set of MIT-licensed icons.

wolframhempel2• 9 years ago

They're beautiful, but I'd much rather use them as an icon font. Is there any way to do that?

usaphp7• 9 years ago

You can drag and drop them to this app and generate the icon font: https://icomoon.io/app

wolframhempel2• 9 years ago

awesome, thanks!

flixic• 9 years ago

Fonts are more convenient to use, but they usually don't display as sharply as SVGs. Generally icons should be only shown at the size they were design for. With icon fonts some sharpness is possible, even if difficult, but it still doesn't look as good as SVGs.

tripzilch• 9 years ago

I find this somewhat hard to believe. And if there was a difference, I'd figure it goes the other way because fonts have hinting. Also, someone itt posted a screenshot of misaligned SVG icons causing bad (blurry) anti-aliasing.

Got some more info/theory on why you believe fonts display less sharp than svgs? And screenshots maybe? :)

Given the choice, I'd still use SVG btw, but that's because icons aren't text, and SVG is a lot better fit.

huhtenberg• 9 years ago

Seems like a good time to mention an absolutely awesome - https://icomoon.io/app

It allows cherry-picking icons from dozens of different SVG icon packs (including Feather) and packaging them into a custom (web)font. It can also be used to package your own SVG assets into a single font file and then use resulting .woff as an SVG sprite sheet.

sb82442• 9 years ago

Icomoon is amazing but so frustratingly slow with large sets

usaphp7• 9 years ago

I don't know how large your set is but I have about 50 projects loaded into icomoon and each has at least 100 icons in it and i have not had any issues with speed. I love the app and it's one of the apps that I can't do any work without.

Also I had once accidentally deleted a project, contacted them and they were able to recover it within a few hours after my request. They are superb

onli4• 9 years ago

I use http://fontello.com/ for that.

mappu2• 9 years ago

I use https://www.npmjs.com/package/fontmin#svgs2ttf for that (as part of my build script).

amelius2• 9 years ago

Why not use separate SVG files? You could reference them as data-url from the CSS to save round-trips.

Perhaps it's just me but using a font to store icons seems arcane.

noir_lord• 9 years ago

Always trade offs, that said I favour the font approach since the download is still relatively tiny and font-face is better supported in the wild.

seanwilson5• 9 years ago

I prefer SVGs as well now. You can style + animate them with CSS, it's easier to see what changed in your Git diffs and you can quickly edit them in an SVG editor if you need to.

shalabhc• 9 years ago

SVGs might work well on the web, but fonts may work better in other contexts. For instance, to display icons in a text editor using just the standard text rendering system.

niutech• 9 years ago

Webfonts use WOFF2 which use Brotli compression which is more efficient than SVG.

component• 9 years ago

Should be noted the _bundled_ SVG set of Feather on icomoon is out of date.

whipoodle• 9 years ago

I favor using image formats for images, and fonts for text :)

danielharrison• 9 years ago

And what about icons?

michaelbazos• 9 years ago

Selfish plug here, but I'm maintaining a library of Feather Icons components for angular 2+ applications. Current version is 3.2.2 as feather version: https://github.com/michaelbazos/angular-feather

fwx• 9 years ago

What benefits does this provide over using Font Awesome icons?

jannes3• 9 years ago

You can include the <svg> directly in HTML source code. No extra requests needed. In some circumstances it might be a better trade-off. Especially when you use a small amount of icons.

Also, you can style each path individually using CSS or SVG. That means you can easily have multi-color icons.

biggerfisch• 9 years ago

I know I at least am getting skeptical and a bit unsure of the licensing guidelines of font awesome. A fully-MIT product might be a bit reassuring for some people. Font Awesome seems to be more transitioning to wanting everyone to pay for licenses (yes, there's a free model, but they're pushing pro pretty hard)

usaphp7• 9 years ago

I personally hate using font awesome. I think it looks dated and already too generic. Every website that uses default unedited bootstrap and font awesome set looks so bland and indistinguishable to me.

asdfgadsfgasfdg3• 9 years ago

OTH if you use their icons from e.g. Bootstrap as they are usually used then users actually recognize them without thinking and the icons actually help users interact with your website - which is the point of the icons anyway!

The same goes for classic simple buttons, nav bars color pallets etc - users know them already before they interact with your site. Most of that design work you did to make you site "different" or "beautiful" just made your site less intuitive for a user.

This opinion comes from experience building b2b webapps - users generally wish they didn't need to do the admin work the webapp is helping them do. So user stories are dominated by building the simplest quickest workflows to allow users to capture, fetch or manipulate the data they need and to then get back on with their lives - having standard controls that are familiar from other sites helps with this.

SippinLean2• 9 years ago

Are you asking generally the benefit of SVG over icon fonts? Github made a nice summary:

https://github.com/blog/2112-delivering-octicons-with-svg

max23_• 9 years ago

Thanks for the link. I am looking for this.

ElectronShak• 9 years ago

Cool

pvinis2• 9 years ago

All these icon collections are great, but I always find missing stuff there, and I don't know how this can be fixed besides complaining (and I don't want to complain when they give it for free).

For example, this one looks really nice, but it only has 'battery' and 'battery-charging'. In an app I work on, I need battery with no charge, 25%, 50%, 75%, 100%, and charging.

Then I think that this would be small to add, but again I don't want to complain. Then maybe someone will need a battery with a sliding charge, so they can represent as many charge percentages as the pixels allow. And then this becomes a whole other things, and not just an icon collection..

jannes3• 9 years ago

This is the full SVG source code for the battery icon:

It shouldn't be too hard to add another rectangle with whatever width you want. Just open up the dev tools and play around with it.

pvinis2• 9 years ago

Sure, I could make something that works. I could make a hacky icon for each. And that's what I did for my app.

I could try to contribute, but it's not going to be in the style of the rest of the icons. That's the point of a collection. It's a collection that one or a team of people made. I can make a PR that they have to look at and fix and/or redesign. I could ask them to create it themselves. But in both of these scenarios, the designers of the collection need to do more work, for me, for free, which is not great for them.

usaphp7• 9 years ago

In an app I work on, I need battery with no charge, 25%, 50%, 75%, 100%, and charging.

These icons are provided in svg format. You can open it in Sketch app, draw a rectangle to show Desiree battery level, the click on the path and click "export/save as SVG".

jjuhl• 9 years ago

And then contribute the new icons back.

inostia• 9 years ago

You can't expect a free icon set to have everything you need. This might help you: https://thenounproject.com/search/?q=25%20battery

zimpenfish2• 9 years ago

It mildly bothers me that the stroke for phone-off is the opposite direction to all the other *-off icons.

MetaDark2• 9 years ago

If it was consistent with the rest of the *-off icons this is what it would look like: http://svgur.com/i/2if.svg.

zimpenfish2• 9 years ago

On the flip side, if the other *-off icons were consistent with it, things would look fine. Plus it's a more natural direction (for right-handers, at least) - bottom left to top right is a natural "NO!" stroke.

ISL• 9 years ago

To pull criddell's important question to root-level:

How can the trademarked logos (Facebook, Instagram, Github, etc.) be provided without licensing terms?

onli4• 9 years ago

Which licensing terms? That has nothing to do with each other. This icon set is foss, that means the sources are free and you can use the icons as you wish, as long as not otherwise encumbered. For the brand icons the source code is free, but if you use them in a way that conflicts with the trademark holder rights they can sue (depending on your jurisdiction).

That's why patents are such a big danger to FOSS software, because that's an equivalent situation.

matthewbauer• 9 years ago

So, there are licensing terms, they just aren't additional ones from Feather?

athenot• 9 years ago

It's (more of) a trademark issue instead of a copyright one.

Basically, you use your own prudence when displaying references to a business (be it with their official branding or with an indirect reference). Of course, many businesses will try to strengthen their brand recognition by insisting you use their official branding or nothing… and only in ways they approve, lest you get on the wrong side of their legal team.

corobo• 9 years ago

You follow the brand guidelines as best you can as an icon supplier then it's most likely on the site/app using them to follow the guidelines too to avoid issue

https://en.facebookbrand.com/guidelines/brand

https://en.instagram-brand.com/guidelines/general

https://github.com/logos

triangleman• 9 years ago

Is this strange anti-aliasing normal? Is the octagon with an exclamation point in it supposed to look like that?

https://img42.com/YAV3Y

ndh2• 9 years ago

Doesn't look like that in my browser, here it's looking good.

ttd• 9 years ago

Pixel-perfect is hard to do in SVG (at least in my experience). You have to be careful to align path geometry to half-pixel values so that whole-number stroke widths end up falling on a pixel boundary. And once you start scaling the SVG to fit a particular view box, that careful placement usually gets trashed.

IgorPartola• 9 years ago

Sweet! What other great FOSS icon sets are out there that you love?

chinathrow• 9 years ago

http://fontawesome.io/

mynewtb• 9 years ago

Font Awesome 5 Pre-Orders Now Available!

Pre-order and get Font Awesome 5 Pro and ALL stretch goals for just $40!

Pre-Order!

Errrr what?

mappu2• 9 years ago

https://materialdesignicons.com/

Available as web font or individual SVGs, sources on github, SIL/Apache2 licensed.

sailfast• 9 years ago

Cool site! Always a fan of getting more design options out there for icons / UX in applications.

Bit of a tangent for product folks:

A lot of this stuff actually does look beautiful, but the use of "beautiful" as a modifier has diluted the term for me. When I click on something labeled "beautiful" I almost always expect to see "meh", and most of the time, that's exactly what happens.

vijaybritto• 9 years ago

The icons are beautiful. But one off the topic thing here is that the webpage loads superfast in 3g in India. Can the site builders talk about the loading perf a bit?

alexdrans• 9 years ago

The whole page is 58KB

Twirrim• 9 years ago

Pingdom tools weighs it in as bigger than that. https://tools.pingdom.com/#!/Mn0e2/https://feathericons.com/

Looking at the site usage, there's an advert weighing in at 36KB that uBlock was nicely hiding from me, but the biggest thing in the page is the web font, 48.58 KB worth. The site looks great on a browser with web fonts blocked, so I'm not sure why they're wasting bandwidth, effort and additional DNS resolution and TCP handshakes there.

julesjanssen• 9 years ago

I guess for Indian standards the latency might often be more of an issue than size in bytes. It looks like this site is served by Netlify, which functions (among other things) as a CDN.

lnx01• 9 years ago

My guess is that they're SVG, which makes them absolutely miniscule. Beyond that the page is simple, little if any js, minimal CSS, and no images.

koolba• 9 years ago

I don't think these icons are particularly beautiful. Not sure if it's because of the simplicity or anti-aliasing, but something just seems off.

ape4• 9 years ago

Just wondering, is it legal to remake a company's logo (eg instagram)

eggpy• 9 years ago

I don't think there's a simple yes/no answer to that. It fits somewhere between trademark and copyright legally, and probably depends on the degree of similarity.

logfromblammo6• 9 years ago

It is legal to re-create the logo. It is not legal to use your re-creation in a manner that infringes upon the trademark.

nkristoffersen• 9 years ago

I pay for noun project but sometimes libraries like this are easier :-)

totony• 9 years ago

What does the MIT license mean in this context? Let's say you use the icons, where should the notice be put?

woodrowbarlow3• 9 years ago

most websites / apps have a page / menu option titled "legal" or "assets" and they dump all of their licensing information on there.

Froyoh• 9 years ago

The umbrella icon makes me feel uneasy.

jamesmp98• 9 years ago

why so?

_cereal• 9 years ago

Maybe because the handle points to the right side, while usually points to the left, making it easy to recognize the icon if you are reading from left to right.

Raphmedia• 9 years ago

It is usually shaped like a J. Here it's reverse, so your brains goes "that's not how J are supposed to be".

tlb• 9 years ago

Those are nice. Appropriately clean and unflavored for an open-source visual resource.

thinbeige• 9 years ago

Great site and there are also other quite helpful suggestions in the thread such as Icomoon.

Problem is that the next time I need SVG icons I will forget these sites, try to google them and ending up on those sites that perform well on Google's SERPs but want money for clean SVGs.

This happened to me two days ago and I just fired up Inkscape and remade those icons. However, this took too long.

How can I remember such sites the next time I need them?

hashmal• 9 years ago

Favorites?

Max_Mustermann• 9 years ago

Start organizing your resources in bookmark folders!

joepie91_2• 9 years ago

I've started tagging my bookmarks, by simply adding a bunch of words that I associate with a page behind the bookmark name in parentheses. So for example, I might add "(open source svg icon fonts font set)" behind the bookmark name for this.

9 out of 10 times I can easily find the bookmark I'm looking for, by entering a few of those words into my bookmark search and/or address bar, and it doesn't require any special extensions or services.

GradDev• 9 years ago

I use Evernote webclipper. You can tag the bookmarks and find them later.

RonanTheGrey• 9 years ago

I use Chrome, predominantly. At least, for my bookmark library. When you save a bookmark in Chrome, it defaults to using the page title as the bookmark description.

I have started renaming the bookmarks - I leave the relevant part of the title (removing irrelevant stuff like brands, brand descriptions etc.) and then I add a set of keywords I associate with the link.

Later, when I want to find it, and call I can remember are some words I associate with the link, I type them in Chrome's search bar and it usually ends up matching at least 1 or 2 that I picked for the title, so Chrome finds the bookmark.

It is not a flawless system but it is effectively bookmark tagging without any additional tools. It's also based on how I associate the memory, and not on whatever random (and usually useless SEO-based text) the page creator decided to use for the title; which means that recalling the link is alot more straightforward because the way we hook memories tends to be really consistent.

jccalhoun• 9 years ago

i use pinboard for this.

hungerstrike• 9 years ago

I wouldn't call them "beautiful". They're OK. "Cute" maybe.

In any case, personally I'd rather wait for other people to call my work beautiful. Seems a bit pompous to self-apply it.

brango• 9 years ago

"Basic" or "simple" are how I'd describe them...

ardit33• 9 years ago

eh... beauty is in the eye of the beholder. The author has every right to describe them beautiful if he thinks so.

In this case I'd call them really cute.

dang• 9 years ago

We usually take that word out of titles since it was sort of a gimmick 5 years ago and has definitely passed its best-before date now.

amelius2• 9 years ago

I think the fastest way to judge an icon set is to look at the "people" icons (or "user" icons). These are the most difficult to get right.

Often, and I wish I had a better description, the people icons look like the symbols you see on men's toilets.

I'd be interested in icon sets which have better solutions for these people icons.

Tokkemon• 9 years ago

And look at me stuck with FontAwesome.

SippinLean2• 9 years ago

FYI if you're concerned about accessibility these SVGs lack any kind of descriptors; you'll need to add your own.

https://css-tricks.com/accessible-svgs/

vforgione• 9 years ago

There's a Chrome icon, but no Firefox or Safari or Edge or any other browser. Not even a generic. Can we please stop with the implicit homogenization around Chrome?

/rant

vntok2• 9 years ago

This is not a conspiracy, you know.

There is a reason the set contains a Twitter icon and not a Mastodon icon, a Facebook icon and not a Diaspora* icon, a CodePen icon and not a Dabblet icon, etc. Like it or not, these are the products that the people elected.

pducks32• 9 years ago

Literally never heard of any of these. However I have heard of Safari, Edge, and Firefox. And I don’t think the market share breakdown of twitter vs Mastodon is similar to Chrome vs. Firefox.

consto• 9 years ago

While I see what you mean, there is compass which is essentially the safari logo, and there is a globe which can be used as a generic browser.

nostromo• 9 years ago

It's open source... Why don't you make one?

clmckinley• 9 years ago

How do you know he didn't, and while he brought up FF, Safari, IE, once he wins that war he will move on to getting his browser icon included.

wlesieutre• 9 years ago

"compass" is identical to the Safari logo

jwilk• 9 years ago

What's the use case for Chrome icon anyway?

kevin_thibedeau• 9 years ago

Not a good one that's for sure.

Feather: Open-source icons

Related Stories