
Clarity Icons: open source icons - johnewo
https://vmware.github.io/clarity/icons/clarity-icons
======
jaffoneh
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...](https://medium.com/claritydesignsystem/the-road-to-svg-and-custom-
elements-in-clarity-icons-1d691c6cc91)

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](https://vmware.github.io/clarity/icons/icon-sets)

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

~~~
smathis
What do you mean by "crisp hinting"?

~~~
noway421
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.

------
ComputerGuru
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](https://vmware.github.io/clarity/icons/icon-sets)

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

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

------
MikeTheGreat
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 :)

~~~
jaffoneh
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...](https://medium.com/claritydesignsystem/the-road-to-svg-and-custom-
elements-in-clarity-icons-1d691c6cc91)).

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

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

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

~~~
zimpenfish
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.

~~~
smathis
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/](https://www.etsy.com/teams/7720/bugs/discuss/14559563/)

------
unicornporn
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/](https://embed.plnkr.co/lxi4NBhTf42rSDZ65KTr/)

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

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

------
konsumer
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/](http://clarity-font.bitballoon.com/)

~~~
pluma
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).

~~~
konsumer
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.

------
Can_Not
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/](https://tagliala.github.io/vectoriconsroundup/)

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

------
laurent123456
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.

~~~
jaffoneh
Good point. Working on it

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

was first

~~~
jaffoneh
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

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

~~~
jaffoneh
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](https://vmware.github.io/clarity/icons/icon-sets#core-shapes)

------
legulere
Which license are those?

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

~~~
mickronome
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.

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

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

~~~
jaffoneh
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)

