Clarity Icons: open source icons

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

by johnewo • 9 years ago

217 38 9 years ago

vmware.github.io

reednj• 9 years ago

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

rplittle• 9 years ago

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

jaffoneh11• 9 years ago

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

pls2halp• 9 years ago

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

dang• 9 years ago

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

jaffoneh11• 9 years ago

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)

MikeTheGreat• 9 years ago

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

jaffoneh11• 9 years ago

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.

polymeris2• 9 years ago

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?

jaffoneh11• 9 years ago

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

noway4212• 9 years ago

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

smathis4• 9 years ago

What do you mean by "crisp hinting"?

legulere• 9 years ago

Which license are those?

jaffoneh11• 9 years ago

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

mickronome• 9 years ago

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.

konsumer2• 9 years ago

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/

pluma• 9 years ago

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

konsumer2• 9 years ago

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.

smathis4• 9 years ago

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.

unicornporn• 9 years ago

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

vanderreeah• 9 years ago

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

jaffoneh11• 9 years ago

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

laurent123456• 9 years ago

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.

jaffoneh11• 9 years ago

Good point. Working on it

ComputerGuru• 9 years ago

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

jaffoneh11• 9 years ago

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

jaffoneh11• 9 years ago

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

Can_Not• 9 years ago

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/

jaxn• 9 years ago

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

smathis4• 9 years ago

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

jcubic• 9 years ago

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

was first

jaffoneh11• 9 years ago

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

Clarity Icons: open source icons

Related Stories