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:
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.
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.
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.
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
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.
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.
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.
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.
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.
Ok, since you don't seem to want to use HN as intended, we've banned the account. If you don't want to be banned on HN, you're welcome to email hn@ycombinator.com and give us reason to believe that you'll follow the rules in the future.
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.
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)
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