
Feather: Open-source icons - mcone
https://feathericons.com
======
huhtenberg
Seems like a good time to mention an absolutely awesome -
[https://icomoon.io/app](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.

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

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

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

~~~
seanwilson
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?

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

~~~
seanwilson
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?

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

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

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

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

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

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

~~~
usaphp
> 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
And then contribute the new icons back.

------
vijaybritto
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
The whole page is 58KB

~~~
Twirrim
Pingdom tools weighs it in as bigger than that.
[https://tools.pingdom.com/#!/Mn0e2/https://feathericons.com/](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.

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

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

~~~
onli
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
So, there are licensing terms, they just aren't additional ones from Feather?

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

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

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

~~~
otterley
> 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?

~~~
logfromblammo
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_.

~~~
otterley
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](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.

~~~
logfromblammo
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.
      |   | |
      '-----'

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

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

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

------
SippinLean
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/](https://css-tricks.com/accessible-
svgs/)

------
thinbeige
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?

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

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

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

------
bubaflub
From
[https://github.com/colebemis/feather/blob/master/README.md#l...](https://github.com/colebemis/feather/blob/master/README.md#license):

    
    
      License
      
      Feather is licensed under the MIT License.

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

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

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

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

[https://img42.com/YAV3Y](https://img42.com/YAV3Y)

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

------
fwx
What benefits does this provide over using Font Awesome icons?

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

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

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

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

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

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

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

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

------
michaelbazos
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](https://github.com/michaelbazos/angular-feather)

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

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

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

~~~
MetaDark
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](https://pastebin.com/iy84YHyY) in your dev
tools console when visiting
[https://feathericons.com](https://feathericons.com).

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

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

------
ringaroundthetx
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
Variety is the spice of life.

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

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

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

~~~
logfromblammo
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
I pay for noun project but sometimes libraries like this are easier :-)

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

~~~
chinathrow
[http://fontawesome.io/](http://fontawesome.io/)

~~~
mynewtb
_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?

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

------
Froyoh
The umbrella icon makes me feel uneasy.

~~~
jamesmp98
why so?

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

------
Tokkemon
And look at me stuck with FontAwesome.

------
ElectronShak
Cool

------
hungerstrike
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
"Basic" or "simple" are how I'd describe them...

