ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Googleが提唱しているフラットUIを発展させたデザインがマテリアルデザインです。アイコンを単純化して情報構造を明確にするだけでなく、さらにマウスオーバーやタップ時のアニメーション、色の変化をつけることでシステムがどういう状態にいるかが明確になります。

そんなマテリアルデザインにフォーカスして作られたアイコン集がMaterial Iconsです。

Material Iconsの使い方

Material Iconsは数百種類のアイコンが提供されています。

アクション系。
アクション系。

特徴としては一つのアイコンで終わりではなく、その状態によって斜線を引いたり、アイコンを重ねたアイコンがあることでしょう。

アラート、AV、コミュニケーション。
アラート、AV、コミュニケーション。

音量アイコン一つとっても、音量の大小、ミュート、設定不可などとパターンが作られています。

コンテンツとデバイス。
コンテンツとデバイス。

スマートフォンでも利用も想定されていますのでデバイスアイコンが充実しています。

エディタ、ファイル、ハードウェア。
エディタ、ファイル、ハードウェア。

イメージ。
イメージ。

地図、ナビゲーション、通知。
地図、ナビゲーション、通知。

ソーシャルとトグル。
ソーシャルとトグル。

Material IconsはPNG画像で提供されていて、Retina想定の2倍アイコンもあります。SVG版もあるので、それを使えば色を変えたり大きさを変更するのも容易でしょう。通常のWebサイトアイコンとしての利用はもちろん、アプリでも使える便利なアイコン集ですね。

Material IconsはCreative Commonsのオープンソース・ソフトウェアです。

Material Icons Index

google/material-design-icons

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2