We all love icons. Icon shopping has a similar effect on me than walking around Staples does. There’s a stationery buzz.

Font Awesome is the ubiquitous, go-to set for web-icons these days, but it’s still a bit fiddly to get it into a Typescript/Webpack project needing sass imports, web-pack loaders.

So, there’s always a bit of excitement raised in me when I find a new source for fonts or icons. And today I found Project Clarity.
It’s a UI/UX framework based on the web-components standard and it looks rather lovely. One of the components is the icon sets, which can be imported separately from the other components if you so wish.

The icon sets are very clean and modern looking. Moreso than font-awesome, I would subjectively assert, and they are, of course, fully-scalable SVGs. There is a core icon-set, but also specialist sets for commerce, social, travel, etc. Unlike font-awesome there are no logos.

Perhaps interestingly, the API is via web-components, so importing the clarity library into your project defines a new web-component <clr-icon/> which you can use to add icons to your page:

<clr-icon shape="info-circle" size="12"></clr-icon>

The component has extra attributes to allow rotation and flipping of the icon, as well as changing the colour or adding badges.

I might look more into Project Clarity, as I rather like the look of the other UI components. It’s very modern and looks just a bit cleaner than Bootstrap. It’s clearly made to be an Angular 4 compatible library, so I’m interested to see how well it would work outside of that environment.

Have you had any experience with Clarity?