website-redesign icon indicating copy to clipboard operation
website-redesign copied to clipboard

Node.js Iconography Spec

Open amiller-gh opened this issue 7 years ago • 6 comments

In preparation for an open call for designers to contribute, we need to lock down some foundational design elements to help keep a degree of Node.js brand consistency between high fidelity mocks.

Specifying which open source iconography library to use will be an import part of this Node.js Design System.

amiller-gh avatar May 09 '18 22:05 amiller-gh

Throwing things out there:

Your standard Fontawesome (would prefer something more unique): https://fontawesome.com/ Clarity Icons: https://vmware.github.io/clarity/icons/icon-sets Feather Icons: https://feathericons.com/

amiller-gh avatar May 09 '18 22:05 amiller-gh

wr-agenda needed

codeekage avatar May 10 '18 06:05 codeekage

I was trying to keep the agenda clean by not throwing too many tasks on there at once 🙂 #42 is on the agenda for today and I expect that conversation to branch off into a discussion about process for these design systems tickets as a whole (all related to #46 – these should technically be sub-tasks, but I think we need the dedicated space for discussion!) When there is movement on these individual DS sub-tasks we can throw the wr-agenda on for dedicated WR group discussion / approval

amiller-gh avatar May 10 '18 13:05 amiller-gh

@amiller-gh

I've looked into the three icon sets you've mentioned as well as a couple others and I think we ought to adopt Feather as the icon set for the new site. It's lightweight and beautiful and will best contribute to a legible and attractive visual language for the new site.

Clarity is clear and balanced, but a bit clerical, like something I'd expect in a Microsoft Office product.

Fontawesome is satisfying and chunky but unimaginative.

I also looked at the Material and Iconic icon sets.

Material has the advantage of coming in several flavors like filled and unfilled. It's rather heavy and blocky, however. Plus it screams "Google" which might not be a plus.

I do quite like Iconic. It's clean and punchy but I think its icons are a little too comfortable being downscaled.

There are many other icon sets on the internet, of course. But I think this roundup addresses most coherent open source sets of significant size.

Material Design: https://material.io/tools/icons/?style=baseline Iconic Icons: https://useiconic.com/open

hmbeale avatar Sep 28 '18 18:09 hmbeale

Graphics/multimedia guy with over 10-years active experience with Adobe Creative Suite. I single-handedly maintain a (very) popular icon-package for Atom, simply named file-icons. These are its icon packs:

These were manually cleaned-up and optimised by hand, most with discrete adjustments to enhance clarity at 14×14px resolution. Some of them were of my own design (those with formats that lacked an "official" icon, such as test-files):

NB: The SVGs are black because they're compiled as an icon-font, where glyphs are coloured differently depending on format.

That last one I designed for Google's GN system... they're welcome to use it. *cough*

Okay, this is starting to become an annoying advertisment, so I'll shaddap. But do let me know if I can design/help/do anything. :+1: /drops the mic

Alhadis avatar Jan 07 '19 10:01 Alhadis

I think Feather Icons fit best to the existing design since they're outlined and not filled.

Another alternative I found:

LaRuaNa avatar Feb 01 '19 10:02 LaRuaNa

I've unarchived this repo so I can close all PRs and issues before re-archiving.

Trott avatar Apr 22 '23 16:04 Trott