Clarity Icons: open source icons | Hacker News Reader

Clarity Icons: open source icons

vmware.github.io

217 pointsjohnewo41 comments

Really excited to see this at the top of the home page for HN. My name is Jehad and I lead the Clarity Design System team. Happy to answer any questions.

For those interested in the work we've done and the road we've taken to get here, we wrote a post originally on our iconography system here:

https://medium.com/claritydesignsystem/the-road-to-svg-and-c...

It is titled: "The Road to SVG and Custom Elements in Clarity Icons"

Much of the content made it through to the "get started" page this thread is linking to.

You can check out the icons themselves directly here. We have over 200+ icons at the moment and counting! https://vmware.github.io/clarity/icons/icon-sets

Hi, the project is awesome! Is better crisp hinting in plans?

What do you mean by "crisp hinting"?

A hinting which adjusts the icon to the pixel grid, so that it has pixel-perfect render under certain sizes. Straight lines take exactly one pixel, etc. Not sure on technical details of how to do that in SVG, but that what fontawesome does for their font.

For anyone looking for, you know, the actual icons which are apparently not visible from the linked site on mobile:

https://vmware.github.io/clarity/icons/icon-sets

Yep, that's a bug we're currently working on, should be fixed today. Thanks for the heads up

Fixed. You can click on the top-right menu to get the sub-menu and from there navigate to the icon set.

Genuine question: Why are there so many free/OSS icon sets around?

There are these Clarity icons, a short way down on HN on the same day there's a 'Feather' icon set, there's Font Awesome, and there are the Glyphicons that come with Bootstrap.

This seems like a lot, and I'm wondering what the dynamics are that cause icon-set-designers to say "Hey, we just finished our own set - let's release this!" Is there good publicity? Are they hard to monetize so they may as well give it away and hope for publicity? Are they easy to make so lots of people make them and some fraction decide to give them away?

I'd love to get insights from someone who understands this better than I do :)

I can't generalize to everyone's motivation but I can tell you ours when it comes to Clarity.

Iconography is an important piece of a design system. Designing iconography that fits within the general look and feel of a design system ends up defining a big part of it especially if that design system is used across many application (within and outside of VMware) as Clarity is being used.

With that in mind, we ended up designing our own. Since Clarity itself is fully open source under the MIT license, it only made sense to open source the iconography system itself and the icon set.

If you take a look at the link posted, there is also an interesting iconography system behind this (You can read more here: https://medium.com/claritydesignsystem/the-road-to-svg-and-c...).

Does not answer your question in general but thought I'll offer our own point of view.

Loving the design, but they look blurry in some cases, like this from your docs: http://i.imgur.com/CBKsCGB.png

Why not use an icon font as most similar projects do?

Thanks for the feedback, polymeris. I'll into why they're looking blurry, I haven't seen that before.

As for why not use an icon font, we've actually outlined the research in details here: https://medium.com/claritydesignsystem/the-road-to-svg-and-c...

That screenshot was taken from Firefox 53.0.3 on Linux/Cinnamon, if it helps.

Maybe SVG should support hinting...

Same for Firefox 54.0.1 on Windows 10.

The icons look blurry on most zoom levels. On zoom 90% the effect is reversed and the left icon looks ok but the others don't: https://imgur.com/a/AeREO

Icon fonts don't degrade gracefully when someone (ie me) disables "let websites use their own fonts". Either you get meaningless letters or those little unicode squares - neither of which are actually useful, of course.

Additionally, icon fonts rely on the PUA to render their glyphs. Given the emoji explosion over the past several years, that PUA is getting harder and harder to assign glyphs to.

I can't be the only one that's visited a site on my phone and found emojis where an icon font glyph was meant to be.

See probably the most famous example: https://www.etsy.com/teams/7720/bugs/discuss/14559563/

1. I have been looking for the icons on this site for 3 minutes and I can't find them. I suppose they should be visible in the examples[1], but they are not. Not in Firefox, not in Chromium.

2. Custom HTML elements. I see that even Firefox 58 wont support for them[2]. Isn't this a premature choice? Is there a fallback?

I was however able to view a couple of fonts via the header on the site. Looks beautiful.

[1] https://embed.plnkr.co/lxi4NBhTf42rSDZ65KTr/

[2] https://caniuse.com/#feat=custom-elementsv1

I found the icons within five seconds - the menu on the left has a heading "Icon Sets".

I shared a bit of our thoughts getting here and getting to custom elements as well as how we support in a medium post we wrote earlier, not sure if you noticed it. Here is a link again: https://medium.com/claritydesignsystem/the-road-to-svg-and-c...

I really appreciate the design of these! Awesome work.

I would be fairly straightforward to use these in icomoon, but for some reason all of the icons have a hitzone rectangle that blocks usage:

    <rect x="0" y="0" width="36" height="36" fill-opacity="0"/>

I got rid of all those, and made this icon-font, if you want that: http://clarity-font.bitballoon.com/

FYI all modern browsers support SVGs and SVG icons have much fewer problems than icon fonts (especially when it comes to fallbacks when the font fails to load).

Totally. I generally use svg icons for anything where I don't need them to match color/size of text, automatically. I just noticed a few people asking for them as a font, and thought I'd help out.

The transparent rectangles in the downloadable SVGs are for sizing. When people used apps like Sketch to create mockups, the SVGs weren't sizing properly because Sketch had no way to understand that there needed to be some space around the icon.

I'm looking for a new icon library. From this list[0], I've choosen fontawesome, but it's a whole 936kb! I'm curious if there's any serious efforts at tree-shaking in icon sets. A folder of SVG files sound like it'll tree shake better than a font file. In my short peruse clarity appeared to be for angular 2+, but I didn't see any details on easily building only with the icons you need, but at least you can pick from smaller icon sub-sets.

[0] https://tagliala.github.io/vectoriconsroundup/

Check out FontAwesome Pro. The new version is in beta and includes SVG

Clarity Icons is for any framework. It's just custom elements. So it does not rely on Angular.

They should define aliases for certain icons. For example, I've searched for "save" and found nothing, however I did find a floppy icon. Or maybe the floppy icon should just be renamed "save" since it doesn't really have any other use today.

Good point. Working on it

Shit, they stole my name. I think that my GTK+ theme https://www.gnome-look.org/content/show.php?content=135654

was first

I believe it's a coincidence especially with how common names are when they are a word. Clarity is based on the name of the design system itself

Is there a page where you can actually see the 100 icons? Or am I missing something?

https://vmware.github.io/clarity/icons/icon-sets

You can take a look at all the categories, icons, and how to use them here: https://vmware.github.io/clarity/icons/icon-sets#core-shapes

Which license are those?

Clarity overall (including the icons and icon system) is under the MIT license: https://github.com/vmware/clarity

I'm a little curious about MIT in the web resource space. What is the proper way to include the license there ?

Including it in every icon / page feels like a waste of bits, but least in my jurisdiction, both the page and the icons are actually copies in the sense of the law as soon as a browser downloads it.

In a regular application it's not an issue, but the wording of MIT is a bit confusing in the context of small resources used by web pages.

Can I suggest that https://vmware.github.io/clarity/ (the project's actual homepage) might work better as a link.

Normally we'd change to that, but it would make the current submission a dupe of https://news.ycombinator.com/item?id=12964851.

The submission is specific to the new icons website and icon system we've just released (vs. Clarity Design System itself that was out and open source since November)

Reply on news.ycombinator.com