If you are making software, I implore you to do a quick and simple test if you plan on using icons: show them to some users and ask if they would know what they mean. There is a significant chance the icons are meaningless. Yes, context helps, yes, merely communicating difference helps, but, for the most part, nobody knows what any of these things mean.
Relying on icons alone is never entirely without risk, no matter how conventional the icon. if you Value accessibility don’t substitute text for imagery. Use imagery to provide a visual anchor for text.
This is probably a bizarre question, but how does an icon artist go about deciding which icons to make? For example, almost every set seems to include at least one airplane, so airplanes seem to be something icon artists expect will be useful... but there are also bathtubs in some sets, which seems odd. Are these collections the results of specific projects, or do they anticipate what designers might need?
From the ecosystem-independent ones I use and highly recommend
- `vscode-file-nesting-config` for decluttering your project folder
- `ni` to not care which of npm alternative project uses
- `eslint config` that has fine defaults for basically every framework (do note that it uses his eslint-style rather then prettier by default), which has TS JSDoc and autocompletion for rules and hides fixable rules in VSCode by default
- `taze` to check deps for updates. May be less good then pm-specific ones but works for every pm.
- `unocss` which is Tailwind clone you can actually understand - it works on regexes. Or can't because it allows to set tw classes in attributes and group them in weird ways.
I've seen only the JavaScript community where people make thousands of different libraries. This goes to show that how shallow each of these libraries are. In other languages like C++ or Rust, usually people maintain a few libraries at max.
Not to say Anthony is not a smart individual.
there are underlying differences between C++, Rust, JS. The aim of libraries are re-usability. To call a small library shallow, its your choice. If you want to drag a helpers folder with you anywhere its your choice. JS does not have the fate to have language updates as C, Rust. Code lives in many envoirements and is in many cases polyfilled/transpiled.
You are welcome to shape your point of view in this free world.
Checkout slidevjs, that may also look shallow to you. The eco-system is very open. It will never be as C++ or Rust. I believe everyone is happy where they are.
Has anyone come across a semantic search to navigate these icon libraries? I want to be able to search for “Industry” and get icons returned that show factory, cogs etc. I’ve been using https://react-icons.github.io/react-icons but the same problem there, you search for a string and it just greps across the official icon name. If you don’t know the name you’re not going to find it.
Excellent work, Love it, bookmark it and considered it for future use!
The HN title is, however, a bit confusing/misleading, especially at the end with 'NES' as it has a special meaning/feeling when read in the context of HN. At first, I though this was a project showing a remake of some icons from the Nintendo Entertainment System. Also, the word Icône (with 'e' at the end and accent circonflexe on letter 'o') is the French translation of icon.
As you point out, 'icônes' is French for 'icons'; the name is probably related to the fact that the site is built using Vite. Was NES capitalized in the title earlier?
Often times, I don't find all the icons I need in one icon package. I wish there was a way to find icons of various sources (and thus, various styles) and make them more consistent to be used in a program.
awesome, i've totally run into the search problem too - always annoys me when the icon names barely match what i need. you ever wonder if icons could just fade out someday and well just rely on smarter search instead?
I really do not like this site - searching is awful (or I am doing it wrong).
If I search for, say, "stop", I get a list of collections which allegedly have a stop icon but I need to check them individually
This is a nice collection.
If you are making software, I implore you to do a quick and simple test if you plan on using icons: show them to some users and ask if they would know what they mean. There is a significant chance the icons are meaningless. Yes, context helps, yes, merely communicating difference helps, but, for the most part, nobody knows what any of these things mean.
Relying on icons alone is never entirely without risk, no matter how conventional the icon. if you Value accessibility don’t substitute text for imagery. Use imagery to provide a visual anchor for text.
This is probably a bizarre question, but how does an icon artist go about deciding which icons to make? For example, almost every set seems to include at least one airplane, so airplanes seem to be something icon artists expect will be useful... but there are also bathtubs in some sets, which seems odd. Are these collections the results of specific projects, or do they anticipate what designers might need?
I can see bathtubs being used in places like real estate sites.
great question, it looks like the beginning of a long read by the New Yorker ;)
Anthony Fu (https://antfu.me/projects).
Should to be known widely.
The guy is a living legend.
His projects are very good
From the ecosystem-independent ones I use and highly recommend
- `vscode-file-nesting-config` for decluttering your project folder
- `ni` to not care which of npm alternative project uses
- `eslint config` that has fine defaults for basically every framework (do note that it uses his eslint-style rather then prettier by default), which has TS JSDoc and autocompletion for rules and hides fixable rules in VSCode by default
- `taze` to check deps for updates. May be less good then pm-specific ones but works for every pm.
- `unocss` which is Tailwind clone you can actually understand - it works on regexes. Or can't because it allows to set tw classes in attributes and group them in weird ways.
- Vitesse theme is fine
Holy, this guy (?) is like the Stephen King of coding.
I've seen only the JavaScript community where people make thousands of different libraries. This goes to show that how shallow each of these libraries are. In other languages like C++ or Rust, usually people maintain a few libraries at max. Not to say Anthony is not a smart individual.
there are underlying differences between C++, Rust, JS. The aim of libraries are re-usability. To call a small library shallow, its your choice. If you want to drag a helpers folder with you anywhere its your choice. JS does not have the fate to have language updates as C, Rust. Code lives in many envoirements and is in many cases polyfilled/transpiled.
You are welcome to shape your point of view in this free world.
Checkout slidevjs, that may also look shallow to you. The eco-system is very open. It will never be as C++ or Rust. I believe everyone is happy where they are.
Great resource.
Has anyone come across a semantic search to navigate these icon libraries? I want to be able to search for “Industry” and get icons returned that show factory, cogs etc. I’ve been using https://react-icons.github.io/react-icons but the same problem there, you search for a string and it just greps across the official icon name. If you don’t know the name you’re not going to find it.
What's with the hat on the o?
In French it's used to mark where an o was followed by an s in Latin, but that's not the case here. Icon comes from Greek word that never had an S.
Wiktionary reports an Esperanto iĉon, which means "male".
Perhaps this means something in some other language? Or is it a metal umlaut?
In words like icône in French, ô is typically used where the original Greek uses ω (omega).
https://en.wikipedia.org/wiki/Circumflex_in_French#Indicatio...
It’s the French spelling. Saying it’s only to indicate the disappearance of an “s” is reductive
> In French it's used to mark where an o was followed by an s in Latin
I love this.
pâté = paste
forêt = forest
fête = fest
île = isle
hâte = haste
hôpital, hospital, hospitality, ... It is nice to discover the initial links people made between words
Icônes is just how to write icones in French.
^ is used in Portuguese too.
Kind of in the similar vein: https://iconify.design/
It is a re-presentation of the same collection. These are marvels of collaboration.
This is actually the same collection of icons, just a different interface.
Excellent work, Love it, bookmark it and considered it for future use!
The HN title is, however, a bit confusing/misleading, especially at the end with 'NES' as it has a special meaning/feeling when read in the context of HN. At first, I though this was a project showing a remake of some icons from the Nintendo Entertainment System. Also, the word Icône (with 'e' at the end and accent circonflexe on letter 'o') is the French translation of icon.
As you point out, 'icônes' is French for 'icons'; the name is probably related to the fact that the site is built using Vite. Was NES capitalized in the title earlier?
Yes, the original title was something like "icôNES" and I got downvoted to death!
Bookmarking this. Thanks for sharing.
Reminds me of this showcase of fonts:
https://www.programmingfonts.org/
I think this one's the same with https://icones.netlify.app/
They are both running the same software, https://github.com/antfu-collective/icones
Often times, I don't find all the icons I need in one icon package. I wish there was a way to find icons of various sources (and thus, various styles) and make them more consistent to be used in a program.
If you’re looking for icons http://thenounproject.com (no affiliation) has a huge collection.
Note: this is unrelated to the Nintendo Entertainment System. It's just a collection of open-source vector icon sets.
(the title was originally stylized as "IcôNES")
awesome, i've totally run into the search problem too - always annoys me when the icon names barely match what i need. you ever wonder if icons could just fade out someday and well just rely on smarter search instead?
What is the license for this, please?
When you click a collection it reveals the license, I clicked some random ones and they were MIT
Curious why the french word ? Is the author francophone ?
Considering Anthony Fu is behind it, it aligns nicely with the Vue ecosystem naming (Vite, Vitesse, Histoire etc)
I have tango icon theme burned into my retinas
my go to source for the last 2 years
These look great. Thanks for sharing.
The capitalisation in the HN item is wrong, it should just be "Icônes". It's just the French word for icons, nothing fancy.
I honestly thought it was a new emulator for the Nintendo Entertainment System.