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.
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.
> 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 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.
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.
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
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?
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)
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.
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.
Love it. Can you display the source when I view an icon. When I search for something a hundred icons show up and there isn't a way to know which icon set each belongs to.
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>)
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.
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?