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.
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?
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.
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..
> 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".
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?
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.
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
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.
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?
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 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.
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.
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
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.
[+] [-] huhtenberg|8 years ago|reply
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|8 years ago|reply
[+] [-] amelius|8 years ago|reply
Perhaps it's just me but using a font to store icons seems arcane.
[+] [-] component|8 years ago|reply
[+] [-] sb8244|8 years ago|reply
[+] [-] whipoodle|8 years ago|reply
[+] [-] vforgione|8 years ago|reply
/rant
[+] [-] nostromo|8 years ago|reply
[+] [-] vntok|8 years ago|reply
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.
[+] [-] jwilk|8 years ago|reply
[+] [-] consto|8 years ago|reply
[+] [-] wlesieutre|8 years ago|reply
[+] [-] jannes|8 years ago|reply
[+] [-] pvinis|8 years ago|reply
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|8 years ago|reply
<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.
[+] [-] usaphp|8 years ago|reply
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".
[+] [-] inostia|8 years ago|reply
[+] [-] vijaybritto|8 years ago|reply
[+] [-] lnx01|8 years ago|reply
[+] [-] alexdrans|8 years ago|reply
[+] [-] ISL|8 years ago|reply
How can the trademarked logos (Facebook, Instagram, Github, etc.) be provided without licensing terms?
[+] [-] onli|8 years ago|reply
That's why patents are such a big danger to FOSS software, because that's an equivalent situation.
[+] [-] corobo|8 years ago|reply
https://en.facebookbrand.com/guidelines/brand
https://en.instagram-brand.com/guidelines/general
https://github.com/logos
[+] [-] athenot|8 years ago|reply
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.
[+] [-] unknown|8 years ago|reply
[deleted]
[+] [-] koolba|8 years ago|reply
[+] [-] SippinLean|8 years ago|reply
https://css-tricks.com/accessible-svgs/
[+] [-] thinbeige|8 years ago|reply
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_|8 years ago|reply
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.
[+] [-] RonanTheGrey|8 years ago|reply
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.
[+] [-] Max_Mustermann|8 years ago|reply
[+] [-] GradDev|8 years ago|reply
[+] [-] hashmal|8 years ago|reply
[+] [-] totony|8 years ago|reply
[+] [-] bubaflub|8 years ago|reply
[+] [-] criddell|8 years ago|reply
[+] [-] tlb|8 years ago|reply
[+] [-] triangleman|8 years ago|reply
https://img42.com/YAV3Y
[+] [-] ttd|8 years ago|reply
[+] [-] ndh2|8 years ago|reply
[+] [-] fwx|8 years ago|reply
[+] [-] sailfast|8 years ago|reply
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|8 years ago|reply
[+] [-] zimpenfish|8 years ago|reply
[+] [-] wolframhempel|8 years ago|reply
[+] [-] flixic|8 years ago|reply
[+] [-] usaphp|8 years ago|reply
[+] [-] unknown|8 years ago|reply
[deleted]
[+] [-] ape4|8 years ago|reply
[+] [-] nkristoffersen|8 years ago|reply