The Noun Project: Icons for everything | Hacker News Reader

The Noun Project: Icons for everything

thenounproject.com

285 pointscoderdude67 comments

I had an idea for something like this a while back but it had a different twist: for any given noun or verb, anyone could upload their attempt at making the most universally recognizable version of that icon. The creator would tag the icon with descriptive words to help categorize it, with maybe one main word that it's trying to convey.

To truly discover which icons are the most clear and recognizable for a given noun, other users would be able to go through the icons one by one and add what they think each icon means by entering in a few key words. With enough input from enough users, it would gradually become clear which icons met their goals and which didn't. These results could be broken down by country and ethnicity, too. This way, we could really be confident that using an icon that's supposed to translate to a word will actually translate as it's supposed to for the maximum number of people.

That sounds like an awesome way to assist in localisation. By analysing the results you could have one set of icons for your app for western countries, another for China etc. It reminds me of the problems planners had in trying to design airport signs for international visiters in the early days of flying and the confusion caused by complex signs asking people to wash their hands. The BBC did a documentary on early UK airports and it featured in it but fortunately I can't find it.

This was one of the first projects I donated to on Kickstarter and one that I am sooo happy I did. I use it as an example to other web developers when I mention why I think the Kickstarter model is really the future of creating useful things.

I don't like the website, the way that all the icons are listed without any sort of indication to how far I'm scrolling through the set. Also, icons are sorted by tags but to find tags I must either search and hope there is a tag or find a tag via specific icons pages, why is there no directory? Feels like the focus was look pretty over efficiently store a large collection of icons. Nice icons though.

I find the layout irritating as well. While The Noun Project is good for common nouns, if you're looking for something slightly out of the norm, you'll have to scroll through endless pages to find something that will fit.

Other than this, it's an excellent resource for any iOS project (or anything else, for that matter.)

Using the categories [0] is the best way to navigate the icons on the site for me. But yeah, I agree that searching is problematic.

[0] http://thenounproject.com/category/

Where did you find that?

I found it when searching for something that wasn't in the list.

Most of the icons are indexed here as well:

http://www.iconfinder.com/search/?q=iconset%3Anounproject http://www.iconfinder.com/search/?q=iconset%3Anounproject_co... http://www.iconfinder.com/search/?q=iconset%3Anounproject_np...

They are grouped by the different authors which makes it easier to find out what license applies. You can search in the different groups by adding a keyword e.g. http://www.iconfinder.com/search/?q=iconset%3Anounproject+pl...

#!/bin/bash

for i in {1..1100}

   wget -q "http://thenounproject.com/site_media/zipped/svg_$i.zip

done

need a trailing "

edit: this is also useful

#!/bin/bash

for i in {1..1036}

unzip svg_$i.zip;rm svg_$i.zip

done

Agree, and unusable on a mobile unfortunately. It says my browser is not up-to-date - more like someone's web dev skills are not up-to-date. It's a very good project but just feels like it's trying to be too clever.

This was on HN five months ago: http://news.ycombinator.com/item?id=2843728

So what? 5 months is a long time, and I bet that they've added a lot of symbols.

(Also: I've been on HN for a really long time and there are plenty of things that are months — or years — old that I've forgotten about and wouldn't mind seeing again.)

Do you think HN would benefit from a bot that reposts 5-month-old resources where the resource would have updated since then?

I think this would only be valuable when the first post is more of a "show hn/looking for contributors" and the second is a "this project has come of age and is valuable for the general population".

Otherwise, if it was valuable then, you would've bookmarked it. If it wasn't, it shouldn't have been submitted.

Sorry you took offense to that. I just thought people would want to see the older thread since it was pretty popular at the time and the comments seemed useful. I love older posts too, and actually include a section in my weekly Hacker Newsletter project just for them.

And some of the rest:

http://news.ycombinator.com/item?id=1981370

http://news.ycombinator.com/item?id=1986921

http://news.ycombinator.com/item?id=2003817

http://news.ycombinator.com/item?id=2022603

http://news.ycombinator.com/item?id=2629937

http://news.ycombinator.com/item?id=2712978

http://news.ycombinator.com/item?id=2720491

http://news.ycombinator.com/item?id=3359410

I've seen it on here every few months for over a year.

These attribution requirements on a per icon basis are a bit much...

Many of the icons are in the public domain which alleviates this problem to some degree.

Unfortunately there's no easy way to filter by license type; it'd sure be helpful.

Agreed here; it's one of the things that continues to make Flickr so useful.

Luckily they have a very good guide on how to attribute[1]. If you are using them on a site or in an App you can simply put the attributions in your about page.

[1] http://blog.thenounproject.com/post/12554806140/the-noun-pro...

Thanks for the heads up.

The requirements listed on that page are still kind of silly, though, especially for a commercial project, where it requires you to list the attribution right near the use of it. For example: "If your product is listed online, you must include the proper attribution on the same page next to the item you are selling. "

That kind of requirement is just begging to be ignored completely.

The donate button that goes straight to paypal kinda sucks. Would be nice to have an in-between page to tell us how donations are used and all that other goodness. Also, don't I recall considerable problems for non-charities to collect "donations" via paypal?

I believe that was a problem with Google but I couldn't find an article.

The problem was soliciting donations with the promise that the funds would be given to a particular charity/cause. Presumably in the past that has often been done in a fraudulent manner.

Just asking for money isn't going to have that particular issue... :)

If you'd like to download PNG instead of SVG, http://thepngproject.com/ is quite helpful, with extensions for Safari, Chrome, and Firefox.

why do they mix symbolic and realistic designs? why are some objects axonometric / isometric / perspective and others front-on. why are some "old fashioned" and others modern?

does anyone actually use this? seriously - are there any attractive, well designed sites as examples? because it seems to me like you need to do a lot of filtering to get something consistent and appealing.

I think the reason for the mix is that there's more than one 'input set'. I figured that when I saw the thermometer icon that that was it: the 'canonical thermometer icon'. However, clicking on it gave me a page of two different icons.

Thanks for this. I came across the site back when it first started, and thought "this would be a promising thing to keep my eye on" - and, in typical fashion, forgot about it completely thereafter.

It has progressed much and I can think of many uses I would put this to.

Was curious about how many HTTP requests were used to load all the Icons, but found that those are not separate 'images', instead SVG is being used to 'draw' them, thus just taking one HTTP request to load a bunch of icons.

Impressive work.

I found a couple of issues (Chrome 16.0.912.75 on Ubuntu 10.04)

- When previewing an icon I can't close the lightbox by pressing "Esc". I have to explicitly click outside the box to close it.

- I can't seem to be able to view an icon's details page when cookies/local storage are disabled. I.e.: from the home page, clicking on an icon doesn't load the details page unless I have cookies/local storage enabled. I can get there with a direct link though (e.g.: http://thenounproject.com/noun/fountain-pen/#icon-No1033)

Anyway, this is a great project, thanks!

this is great, thanks James. I looked through your other projects as well, all have very light and appealing graphics. Would you mind saying what tools you use to pick up colors, templates, etc?

This actually isn't something I made. Just thought it was cool. :)

I use Photoshop 7 for image editing. I look for color inspiration on sites like cssmania.com and dribbble.com. I've used Adobe Kuler a few times. For design, gedit or EditPad Pro. The designs are from scratch but inspiration comes from the sites I mentioned. Sometimes I do rough mockups in Photoshop before I start writing the layout.

thanks. I webdesign little bit by myself. can you point me to javascript you used for hovers and sliding of icons and that "bubble" effect popping up when you click for details? its not jQuery I think. i would like to use this functionality, if this is not copyrighted.

Perfect example of the amateurization of design.

Projects like this have been started before personal computers, by people with a deeper degree of dedication and expertise, only be abandoned by future so-called "disciples" of the same profession. I doubt these people even know who Henry Dreyfuss is and what he tried to do, or they might bother continuing his mission.

No, more is not better when what you need is someone who actually knows something about gestalt, symbology, disabilities, etc. I cringe at the thought of crowd-sourcing our street signs.

Be careful about using some of these icons, a number of them require to attribution to the author.

I'm not sure how tagging works.

Search for sad. You get one result {the smilie :( } and you get a tag category. Clicking the tag cat gives me another result, of a broken heart. I couldn't see a way of suggesting a tag for the smilie.

I like the Noun Project, and I think it's cool, but I doubt its utility at the moment. For example, they have an icon for 'Kiwi', but none for 'Save'?

Edit: They DO have several for 'Upload' and several different ones for 'Download'.

I think 'Save' is just infinitely harder to visualize than 'Download'. There is precisely one meaning of 'Download' (moving data over the internet onto a device). I could go on and on about how many different meanings 'Save' has (remember how kids these days don't know what that 'floppy' icon even means?).

Perhaps they need to add alternate-keywords so if you search for a word but other word is more commonly used to describe a similar action? :)

I love the noun project.

Thanks for your careful clarity when describing the Butterfly Effect. (There's a typo there! "in the sense of providing the energy for the hurrincane,")

Is there anyway of making the licence clearer?

This is a great project. Just scrolling through the list is refreshing and delightful.

And suddenly you get cought off guard by things you didn't know it even existed. Like guerilla gardening.

http://thenounproject.com/noun/mermaid/#icon-No1011

Looks more like a woman then a mermaid.

Patches welcome: http://thenounproject.com/login/?next=/upload/

Is there anything stopping a user from submitting copyrighted material? ie. Are the submissions subject to any kind of screening?

Hopefully they would search on tineye at least before allowing the submission.

I've used icons from TNP in several projects. I really like the designs, and I'm very surprised someone hasn't submitted it yet.

I smell some gender issues: the icon for "Couple" is one step away from adding a leash and the icon for "Team" is all men...

This really is a great project, and has come a long way in the past year since or so since I first came across it.

Shame it's not working on my phone, furthermore it looks like ot is UA sniffing to tell me to upgrade my browser.

Wow. This is such a great project. Thank you for submitting this. This will really help during web development.

very nice project. congrats on getting so much support from kickstarter: http://www.kickstarter.com/projects/tnp/building-a-free-coll...

It was pretty disappointing when I zoomed in and the "Search" magnifying glass wasn't SVG :)

Love the idea. But can you restore the default behavior for the spacebar?

I've been doing this after coming to the US from Europe.

It works great, but you have to go to bed at 9PM if you want to get some good sleep. I think the hard part is to keep that habit.

Of course the side effect is that you end up posting your reply to the wrong article ;)

This is awesome, thanks so much for this!

won't let me download an entire set. I have to do it one. laborious. download. at. a. time. No thanks.

i really like that the site is in german. great study tool. instant mouse over flash cards.

That's a really good point! Many other languages too, including Swedish. Not too many sites can combine a useful resource as well as studying.

Weird...it's in Polish for me...I wonder what makes that happen...

Why are they all black and white?

Unicon.

A lot of them are verbs and adjectives.

Exactly. I was looking for their take on "save". Did they stick to a floppy disk icon?

Reply on news.ycombinator.com