Webサイトやスマートフォンアプリにおいてアイコンはとても重要です。全体として統一されていることでユーザが迷いなく操作できるようになります。最近のフラットで単色系のアイコンでは使われるシンボルが共通化されつつありますが、それでも多彩な種類に対応していないと、ぴたりと当てはまる使い方ができません。 今回紹介するClarityは多彩なデザインが用意されたアイコン集となっています。

Clarityの使い方

コアアイコンです。細いラインで描かれており、一筆書きで書かれたようなデザインが特徴です。

コマース系。

使いどころの多そうなアイコンです。

メディア操作系。

ソーシャル系。

トラベル、地図系。

グラフ系。

テキストエディタ。

技術系。

ClarityはSVGとして提供されているので、拡大や縮小しても綺麗に表示できます。Angularコンポーネントもあり、Webアプリケーションの中で便利に使えます。各種HTMLデザインフレームワークと組み合わせるのも難しくないでしょう。

ClarityはTypeScript製のオープンソース・ソフトウェア（MIT License）です。

Clarity Design System vmware/clarity: UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences