無料でダウンロードできるマテリアルアイコン一覧に加え、とくによく使われるGoogleアイコンの詳しい使い方とカスタマイズ方法について紹介します。
Googleのアイコン以外にもマテリアルアイコンがあるのでデザインに合わせて使い分けられるようになっておきましょう。
商用利用できるマテリアルアイコン一覧
マテリアルアイコンといえばGoogleのアイコンがよく使われますが、他にもたくさん種類があります。
まずはいけてるアイコンを見つけるためにもいくつかアイコンを無料でダウンロードできるサイトやパッケージを紹介します。
Google公式マテリアルアイコン
Google公式のマテリアルアイコンです。2800以上のアイコンを使うことができます。WebサイトやアプリのUIでよく使うアイコンがほぼ網羅されているので、マテリアルアイコンを使うならとりあえずここから取っておけばOK。
アイコンギャラリーサイト
Dribbbleでもアイコンパックをダウンロードすることができます。丸くて可愛いものからエッジが効いててクールなものまで種類が豊富。
特徴的なデザインのマテリアルアイコンが欲しいならここをチェックしてみましょう。
8万種類以上のアイコンが登録されているギャラリーサイト。無料で使用できるものも多いので探してみると意外と使えるデザインのアイコンが見つかるかも。
Figmaで使えるマテリアルアイコンライブラリ
GoogleのマテリアルアイコンをFigmaで使いたい場合のアイコンライブラリです。Figmaユーザーならこれ1つあればアイコン探しに困ることなし。
Figma用 Googleマテリアルアイコンライブラリはこちら
Googleマテリアルアイコンの使い方
Googleマテリアルアイコンを使うには次のような方法があります。
- 全てのアイコンを使えるようにする
- 必要なアイコンだけ個別に使えるようにする
1つ目はCSSファイルを読み込んで.material-icons
のClassをつけたタグで表示する方法、2つ目はGoogleの公式サイトから必要なものをダウンロードして個別に使う方法です。
以下で詳しく紹介します。
全てのアイコンを使えるようにする
GoogleマテリアルアイコンはGoogleフォントと同じように、head
タグ内にlink
タグでCSSファイルを読み込むだけで使えるようになります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Googleマテリアルアイコンの読み込み -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<!-- 省略 -->
</body>
</html>
ここまでできたら、あとはHTMLファイル内で.material-icons
のClassをつけて表示したいアイコン名を指定するだけです。
例えば顔のアイコンを使いたいなら次のようにします。
<span class="material-icons">face</span>
表示はこのようになります。
他のアイコンにする場合はface
のところをアイコン名に変更すればいいだけです。例えば検索アイコンならsearch
にすればいいので、
<span class="material-icons">search</span>
こうなります。
アイコン名はGoogleのマテリアルアイコン一覧ページに全て掲載されているのでこちらを見てください。
必要なアイコンだけ個別に使えるようにする
もう1つの方法は必要なアイコンだけを個別にダウンロードしたり読み込んで使用する方法です。あまり大きなCSSファイルを読み込みたくない場合や必要なアイコンが少ししかない場合はこちらの方法にします。
やり方はGoogleのマテリアルアイコン一覧ページから欲しいアイコンをクリックして右側のパネルを表示し、パネルの下にあるダウンロードボタンを押して画像ファイルとしてダウンロードします。
あとは画像ファイルとして読み込めば表示されるようになります。
<img src="./home_FILL0_wght400_GRAD0_opsz48.svg" alt="">
アイコンの表示ができたので、次はサイズや色の変更方法について紹介します。
Googleマテリアルアイコンのカスタマイズ方法
アイコンのカスタマイズ方法には次のような方法があります。
- カスタマイズしたアイコンをダウンロードする
- CSSでアイコンデザインをカスタマイズする
- Figmaでデザインしたものを使用する
以下で詳しく紹介します。
カスタマイズしたアイコンをダウンロードする
1つ目はアイコン一覧ページでサイズや線の太さをカスタマイズしてからSVGやPNGでダウンロードする方法。
アイコン一覧ページの右側にある編集用のパネルで線の太さやサイズなどをある程度カスタマイズすることができます。
ここで調整したものをダウンロードすることでカスタマイズしたアイコンを使うことができるようになります。
CSSでアイコンデザインをカスタマイズする
2つ目はCSSを使ってアイコンをデザインする方法です。
サイズや色は自由にスタイルすることができますが、Googleの公式ガイドラインのページに従ってCSSコードを書くことが推奨されています。
例えばサイズなら以下のように18、24、36、48ピクセルを定義しておいてサイズ変更が必要なアイコンに対してclassを付け加えるようにします。
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
<span class="material-icons md-18">search</span>
Figmaでデザインしたものを使用する
3つ目はFigmaでデザインをカスタマイズしてからダウンロードしたりSVGコードをコピーして使う方法です。
GoogleマテリアルデザインはFigmaファイルでも提供されているので、ライブラリをFigmaで開いて自由に編集することができます。
デザインの時点で見た目を調整してから使えるのでこちらの方がやりやすいですね。
まとめ
この記事ではマテリアルアイコンライブラリ一覧と、よく使われるGoogleマテリアルアイコンの使い方について紹介しました。
Webサイトでも使いやすいアイコンが揃ってるのでFigmaファイルをダウンロードしておくと便利です。