無料で商用利用可能なアイコンセット Google Material icons

Google Material icons

Googleでは、マテリアル・デザイン仕様のアイコンセット「Material icons」が提供されており、アイコンも随時追加されています。

これらは、Webアイコンとして簡単に使用することができます。

Google Material icons

Google Material icons

Material iconsのアイコンセットには、アイコンが随時追加されており、ダウンロードして使用することもできるし、Webサイトの場合はWebアイコンとして直接標示することが可能です。ライセンスは、creative commons が採用されており、アイコンの使用や改変も自由。

マテリアル・デザインとは、2014年にGoogleが提唱した新しいデザインガイドラインで、制作物に統一されたデザインを取り入れることで、統一感のある使いやすいUIを目指したもの。

 

アイコンサンプル

Webアイコンとして使用したサンプルはこんな感じです。

shopping_cart
add_shopping_cart
android
card_giftcard
rss_feed
mail
phone_iphone

文字と同じ扱いなので、CSSで色も変えれます。
check_circle
info
phone

 

Google Material iconsの使い方(Webアイコン)

Material iconsをWebアイコンとして使用する方法を解説していきます。

リンクをクリックしサイトに行きます

まずは、Googleの Material icons のサイトに行きます。表示されたページを下にスクロールするとアイコンがカテゴリー分けされて表示されています。この中から使用したいアイコンを選びクリックします。

Google Material icons アイコンの選択

アイコンをクリックすると、画面下にブルーのバーが表示されます。一番右の「ICON FONT」をクリックします。

 

ICON FONT

「ICON FONT」をクリックすると、使用するための情報が表示されます。

Google Material icons (ICON FONT)

まずは、「STEP 1」の「instructions」をクリックし、「Material Icons Guide」のページを表示します。CSSのためのlinkタグをコピペします。

 

linkタグをコピペする。

「Material Icons Guide」のページが表示されたら、スクロールして下の画像の箇所を表示し、linkタグコピーします。

Material Icons Guide

分からない場合は、下のコードをコピーしてください。

 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 

コピーしたlinkタグを、使用したいページのhead要素の中に貼り付けます。

Google Material icons

※なお、複数のアイコンをページの中で使用する場合も、linkタグは1つだけで構いません。

 

iタグをコピペする。

linkタグのコピペが終わったら、今度は実際に表示するためのiタグをコピペします。

Google Material icons

「STEP 2」に表示されている「iタグ」を、アイコンを表示したい場所にコピペします。

Google Material icons

あとは、HTMLをブラウザで表示するだけで、アイコンが表示されていると思います。

 

関連記事