Feather: Open-source icons | Hacker News Reader

Feather: Open-source icons

feathericons.com

844 pointsmcone140 comments

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.

Icomoon is amazing but so frustratingly slow with large sets

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

I loaded streamline font set into it and it's actually close to unusable on my machine.

I'm glad to hear it works for others though.

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

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

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.

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.

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.

Do you know any way to style them using CSS without using JS? (and while keeping them cacheable)

Plain CSS works doesn't it? [0]

[0] https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SV...

That works because the SVG element is inline with the document. It doesn't work if you use an external link to the SVG document. The standard workaround is to use JS or server-side processing to inline the SVG elements directly into your HTML document.

Okay, here's a better example. [0]

That's a linked svg, styled with CSS, though the CSS gets linked into the SVG header, rather than inherited from the page it is on.

    <?xml-stylesheet href="sp-styles.css" type="text/css"?>

However, still possible to use CSS, rather than JS, without inlining.

[0] http://blogs.sitepointstatic.com/examples/tech/svg-basics/sv...

So I was assuming the desired functionality was to be able to include the same image several times on the same page where each image has a different stroke/fill colour (like you might do with the Font Awesome icon font). To do it in the way you suggest would mean a different SVG file with the CSS file modified for each one? If so it means you couldn't cache the SVG files.

> So I was assuming the desired functionality was to be able to include the same image several times on the same page where each image has a different stroke/fill colour (like you might do with the Font Awesome icon font).

That wasn't my assumption, I was just seeing if it could be done, rather than if you might want to. That thought would make this method impractical, though there may be a way around that.

> To do it in the way you suggest would mean a different SVG file with the CSS file modified for each one?

Not necessarily. CSS cascades, and SVG can embed SVG. (Edit: I'm not actually sure about the browser support here. Do nested SVGs get to inherit from each other? Is that the same for all browsers? It'd require a bit of experimentation.)

So potentially, you could have a wrapper document that sets an ID or class that corresponds to how you want to change it, and then your base image linked within the wrapper.

The base image would cache, as would the base CSS file, however you could still apply changes.

A bit clumsy, but still allows you to avoid JS or in-lining, if that is what you want.

Of course, the wrapper won't cache, but it should be a very, very small overhead.

Unfortunately no but would love to be proved wrong. You can inline them server-side but then they're not cacheable. There's SVG filters but they're not widely supported yet. I'm curious of the reason why this is so difficult actually (security?). What's wrong with using JS?

I block it by default, so that wouldn't work. I would love to make web pages that I myself could read/see if they were made by someone else.

Fair enough. There's so much JS only functionality now though that I can't see how you can avoid it when developing a complex website. You find you can do the majority of things you want online with JS disabled?

Not all websites are complex though. There should be little need to use scripts on a simple blog, for example, but I've seen way too many times that you'll end up with a blank screen without scripts, even though the text is already there in the DOM.

Consider a middle ground. Check out uMatrix, it allows you to block third-party js by default while allowing js from same site as well as making it simple to permanently allow selected domains for one or all others.

I already use uMatrix, but why should I trust 1st party scripts. I regularly visit less-trusted sites or sites that I never visited before, and I wouldn't want them to be able to just execute Turing-complete scripts with access to potentially a lot of information on me (only just the browsing history would be a lot) on my machine or that can trivially fingerprint me.

I already use svg sprites https://css-tricks.com/svg-sprites-use-better-icon-fonts/

You mean more than (stroke|fill)(Color|Opacity)?

If included via svg:use the style gets inherit and you won't need JS. The icons can still be bundled as symbols in one svg, which is cacheable.

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.

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

Shouldn't SVG be compressed in the same way as other text contents like HTML and JS? Woff opts out of this behavior, but it's standard with all web servers.

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

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

And what about icons?

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

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.

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.

It is similar in the sense that one of the two products absolutely crushes their competition in most if not all markets and in most if not all aspects that actually matter to the end users.

Chrome has 59% global marketshare on the desktop [1][2]. That's big, but not "crushing competition so much others might as well not exist" big.

1: https://www.netmarketshare.com/browser-market-share.aspx?qpr...

2: https://www.w3counter.com/globalstats.php?year=2017&month=3

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.

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

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.

"compass" is identical to the Safari logo

What's the use case for Chrome icon anyway?

Not a good one that's for sure.

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

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..

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.

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.

Then perhaps open source icons are not a good fit for you! If you have some requests/demands, and can't do the work yourself, then paying a premium to have that work done seems like the correct route.

Vietnamese

i know this wasn't the point of your comment, but: overlaying/combining SVGs really isn't a hack.

> 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".

And then contribute the new icons back.

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

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?

The whole page is 58KB

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.

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.

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.

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

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

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.

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

I don't think that licensing terms is the right term here. But IANAL. I'd call it licensing terms if you are using the license of the trademark holder to do something with the icon, like marking a product of your own. That's not happening here. Feather is distributing icons of brands (which is legal) or icons that resemble those icons of brands (still legal) to people that may use them to depict those brands (for which one does not require a license).

Unfortunately, copyrights and trademarks aren't mutually exclusive, so technically logos could be infringing derivative works if copyrighted.

Oh, seems like I'm out of my depth there :/ I do understand that copyright might apply, but not how it could make such logos problematic (in US-law, right?). In which way can such a logo be infringing derivative work?

You have fallen into the confusing intersection between trademark and copyright.

Files created by Facebook, depicting the trademarked Facebook logo, are copyrighted by Facebook. Files created by Feather, depicting the trademarked Facebook logo, are copyrighted by Feather. If the latter is freely licensed, with no restrictions on use, you may use that image in whatever manner you please. If you use it in a manner that generates brand confusion with Facebook's business, Facebook may, as a trademark enforcement action, order you to stop using the image in that way. They cannot make additional copyright claims.

It is likely they will anyway, under the assumption that no one but Facebook would create files from scratch for corporate logo images, when the company itself distributes gratis images of its logo to anyone who wants to put one on their website. But if they didn't make it, they can't impose prior restraint on what you do with it via licensing terms.

Facebook may impose copyright licensing terms on its own images that support its defense of its trademarks, but those terms have nothing to do with the image by Feather, or any other clean-room implementation of the Facebook logo.

What about the derivative works right? Although not a literal copy, one could argue that making one's own similar version of the logo could constitute a derivative work that could be construed as infringing.

In this example, the copyright interest is in the digital file, not the subject matter of the image. As long as you do not use Facebook's own file, such as by wrapping a PNG downloaded from Facebook in an SVG, there is nothing to derive.

But if you did do that, there would also be nothing transformative either, so your new image file would not be eligible for protection.

If it seems stupid and counterintuitive to separate the property interest in the file from the property interest in the image described by the file, that's because it is. But some people wanted to be able to have copyrighted digital image files based on artworks that have been in the public domain for centuries, so here we are.

> In this example, the copyright interest is in the digital file, not the subject matter of the image.

That's not my understanding of what the derivative works protection covers. What else is to prevent me from making a new Star Wars film using Lucasfilm's (now Disney's) characters?

The Star Wars proper nouns are trademarked. Characters, vehicles, planets, etc. That is all.

You can make a Star Wars styled film that makes no mention of any existing Star Wars trademarks (an intellectual property minefield) and Disney couldn't touch you (legally). They could still smother you with their massive business negotiating leverage, by threatening to blackball anyone that screens your movie.

It's called pastiche.

Since I can't seem to convince you, here's a definition of "Derivative Work" straight from 17 U.S.C. 101 (https://www.law.cornell.edu/uscode/text/17/101) (emphasis mine). (FWIW, I am a licensed attorney who specialized in IP law while in law school; this is not legal advice.)

"A “derivative work” is a work _based upon one or more preexisting works_, such as a translation, musical arrangement, dramatization, fictionalization, motion picture version, sound recording, _art reproduction_, abridgment, condensation, or _any other form in which a work may be recast, transformed, or adapted_. ..."

As applied to the company logo in question, the language is pretty well on point. I'd tread with caution unless the company has made it clear they approve of the work.

I don't consider the Facebook logo itself to embody a level of unique creative expression sufficient to qualify as an artwork. Obviously, if contested, that decision could be overruled by a judge, but I like my chances there.

  .-----.
  |   .-|  Probably does not
  |  -+-|  violate copyright.
  |   | |
  '-----'

The bar for qualification as an artistic expression is extremely low. See _Feist Publications, Inc., v. Rural Telephone Service Co_, 499 U.S. 340 ("To be sure, the requisite level of creativity is extremely low; even a slight amount will suffice. The vast majority of works make the grade quite easily, as they possess some creative spark, "no matter how crude, humble or obvious" it might be.")

You'd be better off arguing some other angle, but please study law first so as not to waste anyone's time.

...as though only the opinions of lawyers count when it comes to the laws that govern everybody. This is why right to trial by petit jury and indictment by grand jury are written into the federal constitution and most state constitutions. The purpose of studying law is so that justice may exist in a society that has abandoned the use of force as the first means of resolving disputes. It is not to shut down a debate via appeal to authority.

What's wasting everyone's time is the rich and powerful trying to mine out and own every last corner of culture. I'll be damned if I will allow Facebook to own every blue square with a lowercase 'f' in it, rather than just the one they use to mark their service. You may feel otherwise, but until this matter actually goes to trial, that's just, like, your opinion, man.

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.

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

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.

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/

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?

Favorites?

Start organizing your resources in bookmark folders!

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.

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

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.

i use pinboard for this.

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

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

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

  License
  
  Feather is licensed under the MIT License.

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

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.

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

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

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

https://img42.com/YAV3Y

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

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.

What benefits does this provide over using Font Awesome icons?

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.

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)

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.

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.

> Most of that design work you did to make you site "different" or "beautiful" just made your site less intuitive for a user

Don't you think it depends on a lot of factors, not just the use of a different icons?

Also I doubt users will have trouble understanding that a lock icon on feather and a lock icon on font awesome have the same meaning.

> Don't you think it depends on a lot of factors, not just the use of a different icons?

Of course - it all adds up. The trick is knowing where and when it is worth differentiating.

Vas majority of the websites that use font awesome icons are cheaply made projects that fail to get traction most of the time and have a relatively small user base. So using font awesome icons with an idea that it will help users recognize what they represent, is flawed. I doubt regular users who according to you "would have trouble figuring out what the icon means if they did not see it before" even visit the type of sites that use font awesome icons, they are primerely used by small startups or one men shops with users mostly coming from sites like HN or producthunt anyway.

Please do not misquote me like you do in this post.

> Most of that design work you did to make you site "different" or "beautiful" just made your site less intuitive for a user.

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

Thanks for the link. I am looking for this.

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.

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

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

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

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.

If you want a copy with the lines going from bottom left to top right on all *-off icons, you can run https://pastebin.com/iy84YHyY in your dev tools console when visiting https://feathericons.com.

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

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

awesome, thanks!

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.

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.

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

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.

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.

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

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

http://fontawesome.io/

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?

There will still be an open source version called Font Awesome 5 Free. See https://fontawesome.com/#pro for more details.

https://materialdesignicons.com/

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

And look at me stuck with FontAwesome.

Cool

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.

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

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.

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.

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.

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 ?

Variety is the spice of life.

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.

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

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.

The umbrella icon makes me feel uneasy.

why so?

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.

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

Reply on news.ycombinator.com