Nice! There’s a similar project by Anthony Fu: https://icones.js.org
I wonder if both share the same superset of icons, relying on the same Iconify framework?
For those reading: after you select a collection, there is a small "i" icon at the top of the screen, near the search bar. Clicking it gives a link to the source and license info!
----
Though as others have mentioned: beware that there is still obviously-trademarked stuff in there, and ones that may require attribution; check the source to be sure. If you're looking at a specific icon, there doesn't seem to be an obvious way to get back to the collection it came from (and thus see the original license terms).
The availability of trademarked icons (such as Google and Amazon, linked by others) makes me think they just crawled for SVG icons and slapped an OFL on them, which you can't do.
> The Amazon logo and the Amazon Smile mark are not permitted in third-party advertising by vendors and sellers linking in to Amazon. The “available at Amazon” logo is permitted for use in advertising.
The main smile logo variants are also permitted for use in "logo line ups", "in a line up with two or more other retailers and not linking in to Amazon."
Most other uses are either not permitted, or subject to conditions, which sometimes involve obtaining written permission from Amazon.
That's just an example, other Amazon logos for other product areas - e.g. their app store - have similar conditions.
There may be some fair use exceptions to all this if used in a context that doesn't involve selling products.
Not a lawyer, but surely something can be both open source and trademarked? As far as I understand those are unrelated concepts. In this context, the “source” is the SVG markup.
The issue is how you use it. Whether the icon SVG markup is open source isn't very relevant if you're not allowed to use it. If you want to personally mess around with it and not use it in any commercial context, no-one is going to care.
I guess they crawled all icons from github projects and did not check every icon... I would also double check the license with the source before using it.
I clicked on All Collections, searched for an icon and found a few, but then I wanted to view other icons in it's collection. I don't see a way to do that, or even figure out that icon's source. Also, the "Search Icons" box is cleared when I move between collections. No (obvious?) way to sort the collections by the number of icons.
For another great option in this space look at icomoon: https://icomoon.io/#icons. It has both free and paid fonts with some useful tools to build a custom set from different collections and export them to various formats.
Hope you don't mind a very small feature request / suggestion... when viewing search results, it would be great if you could include a link to the parent collection for results (e.g. I see an icon I really like in the results, and want to know which collection it came from).
The whole site is a neat idea... but not seeing which collection the search result came from makes the site pretty useless (also regarding license... which the site doesn't show, but if I don't know the icon set I can't even look it up myself)
https://iconify.design/ has been my go to for years, but I like the ability to customize the colors from the UI, although I personally use tailwind classes for my colors
Browsers finally have somewhat consistency when it comes to SVG rendering. For a long time, it was almost impossible to get SVGs that had the exact same look and position (down to the px) in all browsers and platforms. Otherwise we would have been using SVGs for icons and logos for a long time already, it's superior in most cases when considering performance, resource usage, I/O, quality and more.
I was recently cleaning out some cabinets at my parent's house, and I found a box of clip art. It was spread over 50 disks and cost $50 (price tag was still on it). Probably from around 1990.
To think, today that entire collection of icons is free and instantly available.
I pay the $40 a year for the Pro version. It's great when you need an icon or a simple illustration. I composite multiple icons together quite a bit. There really is an icon for everything.
I think using a single SVG document that contains multiple icons identified by ids which you can reference from HTML is the idiomatic way of solving your problem. It guarantees that if external resources are not permitted to load, at least it presents a human readable title instead of a random letter.
I can't find a link to the reference CSS Tricks article that presented the technique, but you can see it in action on this website: https://brutalinks.tech (There's an icon document: which is referred in the HTML when the icons are loaded: <svg><use xlink:href="https://brutalinks.tech/icons.svg#icon-home "><title>home</title></use></svg>)
51 comments
[ 4.7 ms ] story [ 99.0 ms ] thread[edit: seems to be a superset of it, as shown on this page https://iconbuddy.app/fa-solid]
This does not seem to be possible at the moment, whenever the icon is discovered through the search all icons feature. Or am I missing something?
It uses the term "open source icons," but given how over-used/abused that terminology is these days, it doesn't really mean much to me.
I don't see any license info in the downloaded SVG files either, from spot checking.
For those reading: after you select a collection, there is a small "i" icon at the top of the screen, near the search bar. Clicking it gives a link to the source and license info!
----
Though as others have mentioned: beware that there is still obviously-trademarked stuff in there, and ones that may require attribution; check the source to be sure. If you're looking at a specific icon, there doesn't seem to be an obvious way to get back to the collection it came from (and thus see the original license terms).
> The Amazon logo and the Amazon Smile mark are not permitted in third-party advertising by vendors and sellers linking in to Amazon. The “available at Amazon” logo is permitted for use in advertising.
Here's the "available at Amazon" logo: https://m.media-amazon.com/images/G/01/AdProductsWebsite/ima...
The main smile logo variants are also permitted for use in "logo line ups", "in a line up with two or more other retailers and not linking in to Amazon."
Most other uses are either not permitted, or subject to conditions, which sometimes involve obtaining written permission from Amazon.
That's just an example, other Amazon logos for other product areas - e.g. their app store - have similar conditions.
There may be some fair use exceptions to all this if used in a context that doesn't involve selling products.
This feature's results page lists icons without mentioning from which collection they are, so therefore without providing the licensing information...
It may be technically open source, but without any benefits.
See say https://iconbuddy.app/bxl/amazon https://iconbuddy.app/devicon/google for obvious problems that I can spot. How many are from more obscure services?
How many are CC-BY or requiring attribution? How many are from some license-washing dubious source stealing icons and claiming to be CC0 licensed?
Hope you don't mind a very small feature request / suggestion... when viewing search results, it would be great if you could include a link to the parent collection for results (e.g. I see an icon I really like in the results, and want to know which collection it came from).
Unrelated, but hoping someone knows: is there a replacement for flaticon.com, which went non-free for SVGs within the last few years?
To think, today that entire collection of icons is free and instantly available.
A pretty good side hustle!
"Affair" https://thenounproject.com/icon/cheating-10395/
I can't find a link to the reference CSS Tricks article that presented the technique, but you can see it in action on this website: https://brutalinks.tech (There's an icon document: which is referred in the HTML when the icons are loaded: <svg><use xlink:href="https://brutalinks.tech/icons.svg#icon-home "><title>home</title></use></svg>)
Still, very interesting how brutalinks.tech implemented this. Didn't know about this method, thanks!