14 ms·
Feather: Open-source icons
- fwx 9y agoWhat benefits does this provide over using Font Awesome icons?
- jannes 9y agoYou 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 9y agoI 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)
- usaphp 9y agoI 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 9y agoOTH 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 9y ago> 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 9y ago> 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 9y agoVas 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 9y agoPlease do not misquote me like you do in this post.
- usaphp 9y ago> Most of that design work you did to make you site "different" or "beautiful" just made your site less intuitive for a user.
- SippinLean 9y agoAre you asking generally the benefit of SVG over icon fonts? Github made a nice summary: https://github.com/blog/2112-delivering-octicons-with-svg https://github.com/blog/2112-delivering-octicons-with-svg
- max23_ 9y agoThanks for the link. I am looking for this.
- bubaflub 9y agoFrom https://github.com/colebemis/feather/blob/master/README.md#license https://github.com/colebemis/feather/blob/master/README.md#l...: License Feather is licensed under the MIT License.
- criddell 9y agoAre the trademarked icons (Github, Slack, maybe others) also covered by the MIT License?
- jannes 9y agoI really like that these are SVG icons with a minimal amount of paths rather than an icon font.
- ringaroundthetx 9y agoI 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 9y agoVariety is the spice of life.
- astine 9y agoThis 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.
- woodrowbarlow 9y agofeather has a consistent style and the MIT license. for some projects that might be important.
- ocdtrekkie 9y agoOne 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.
- wolframhempel 9y agoThey're beautiful, but I'd much rather use them as an icon font. Is there any way to do that?
- usaphp 9y agoYou can drag and drop them to this app and generate the icon font: https://icomoon.io/app https://icomoon.io/app
- wolframhempel 9y agoawesome, thanks!
- deleted 9y ago[deleted]
- flixic 9y agoFonts 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 9y agoI 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 9y agoSeems 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.
- onli 9y agoI use http://fontello.com/ http://fontello.com/ for that.
- mappu 9y agoI use https://www.npmjs.com/package/fontmin#svgs2ttf https://www.npmjs.com/package/fontmin#svgs2ttf for that (as part of my build script).
- sb8244 9y agoIcomoon is amazing but so frustratingly slow with large sets
- usaphp 9y agoI 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
- sb8244 9y agoI 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.
- amelius 9y agoWhy 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.
- michaelbazos 9y agoSelfish 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
- ElectronShak 9y agoCool
- pvinis 9y agoAll 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..
- jannes 9y agoThis is the full SVG source code for the battery icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="6" width="18" height="12" rx="2" ry="2"></rect><line x1="23" y1="13" x2="23" y2="11"></line></svg> 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.
- pvinis 9y agoSure, 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.
- akmiller 9y agoThen 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.
- zimpenfish 9y agoIt mildly bothers me that the stroke for phone-off is the opposite direction to all the other *-off icons.
- MetaDark 9y agoIf 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 9y agoOn 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 9y agoIf 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.
- ISL 9y agoTo pull criddell's important question to root-level: How can the trademarked logos (Facebook, Instagram, Github, etc.) be provided without licensing terms?
- onli 9y agoWhich 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 9y agoSo, there are licensing terms, they just aren't additional ones from Feather?
- deleted 9y ago[deleted]
- onli 9y agoI 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).
- wyldfire 9y agoUnfortunately, copyrights and trademarks aren't mutually exclusive, so technically logos could be infringing derivative works if copyrighted.
- triangleman 9y agoIs 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
- ndh2 9y agoDoesn't look like that in my browser, here it's looking good.
- ttd 9y agoPixel-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 9y agoSweet! What other great FOSS icon sets are out there that you love?
- chinathrow 9y agohttp://fontawesome.io/ http://fontawesome.io/
- mynewtb 9y agoFont 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 9y agoThere will still be an open source version called Font Awesome 5 Free. See https://fontawesome.com/#pro https://fontawesome.com/#pro for more details.
- mappu 9y agohttps://materialdesignicons.com/ https://materialdesignicons.com/ Available as web font or individual SVGs, sources on github, SIL/Apache2 licensed.
- sailfast 9y agoCool 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 9y agoThe 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 9y agoThe whole page is 58KB
- julesjanssen 9y agoI 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.
- Twirrim 9y agoPingdom 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.
- lnx01 9y agoMy 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 9y agoI 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 9y agoJust wondering, is it legal to remake a company's logo (eg instagram)
- eggpy 9y agoI 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 9y agoIt 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 9y agoI pay for noun project but sometimes libraries like this are easier :-)
- totony 9y agoWhat does the MIT license mean in this context? Let's say you use the icons, where should the notice be put?
- woodrowbarlow 9y agomost websites / apps have a page / menu option titled "legal" or "assets" and they dump all of their licensing information on there.
- Froyoh 9y agoThe umbrella icon makes me feel uneasy.
- jamesmp98 9y agowhy so?
- tlb 9y agoThose are nice. Appropriately clean and unflavored for an open-source visual resource.
- thinbeige 9y agoGreat 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 9y agoFavorites?
- Max_Mustermann 9y agoStart organizing your resources in bookmark folders!
- joepie91_ 9y agoI'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 9y agoI use Evernote webclipper. You can tag the bookmarks and find them later.
- RonanTheGrey 9y agoI 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.
- hungerstrike 9y agoI 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 9y ago"Basic" or "simple" are how I'd describe them...
- ardit33 9y agoeh... 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 9y agoWe 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.
- amelius 9y agoI 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 9y agoAnd look at me stuck with FontAwesome.
- SippinLean 9y agoFYI 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/
- vforgione 9y agoThere'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 9y agoIt's open source... Why don't you make one?
- clmckinley 9y agoHow 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.
- vntok 9y agoThis 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 9y agoLiterally 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.
- vntok 9y agoIt 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.
- wongarsu 9y agoChrome 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?qprid=0&qpcustomd=0&qptimeframe=Y https://www.netmarketshare.com/browser-market-share.aspx?qpr... 2: https://www.w3counter.com/globalstats.php?year=2017&month=3 https://www.w3counter.com/globalstats.php?year=2017&month=3