無料で商用利用可能なアイコンセット 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タグを、使用したいページのhead要素の中に貼り付けます。

Google Material icons

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

 

iタグをコピペする。

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

Google Material icons

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

Google Material icons

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

 

▼専門学校進学をお考えの方へ

熊本電子ビジネス専門学校では、7月24日(日)に7つのコースから選べる「体験授業」を行います。同日午前中にはオープンキャンパスも開催されますので、一度学校に来てみませんか?

ITビジネス科では、Webデザインの体験授業を予定しています。

PR

関連記事