Node.js Iconography Spec

[amiller-gh]

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]

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/

[codeekage]

wr-agenda needed

[amiller-gh]

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

[hmbeale]

@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

[Alhadis]

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:

• A custom icon-font (which never had a name) containing 614 assorted icons (and growing)
• MFixx: Optimised fork of MFizz
• DevOpicons: Optimised fork of DevIcons

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

[LaRuaNa]

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

Another alternative I found:

• Foundation
• Line Awesome

[Trott]

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