更新日: 2023 / 03 / 31

全部無料!Googleマテリアルアイコン素材のダウンロードとカスタマイズ方法

カテゴリー: 素材

無料でダウンロードできるマテリアルアイコン一覧に加え、とくによく使われるGoogleアイコンの詳しい使い方とカスタマイズ方法について紹介します。

Googleのアイコン以外にもマテリアルアイコンがあるのでデザインに合わせて使い分けられるようになっておきましょう。

  1. 商用利用できるマテリアルアイコン一覧

    1. Google公式マテリアルアイコン
    2. アイコンギャラリーサイト
    3. Figmaで使えるマテリアルアイコンライブラリ
  2. Googleマテリアルアイコンの使い方

    1. 全てのアイコンを使えるようにする
    2. 必要なアイコンだけ個別に使えるようにする
  3. Googleマテリアルアイコンのカスタマイズ方法

    1. カスタマイズしたアイコンをダウンロードする
    2. CSSでアイコンデザインをカスタマイズする
    3. Figmaでデザインしたものを使用する
  4. まとめ

商用利用できるマテリアルアイコン一覧

マテリアルアイコンといえばGoogleのアイコンがよく使われますが、他にもたくさん種類があります。

まずはいけてるアイコンを見つけるためにもいくつかアイコンを無料でダウンロードできるサイトやパッケージを紹介します。

Google公式マテリアルアイコン

Google公式マテリアルアイコン

Google公式のマテリアルアイコンです。2800以上のアイコンを使うことができます。WebサイトやアプリのUIでよく使うアイコンがほぼ網羅されているので、マテリアルアイコンを使うならとりあえずここから取っておけばOK。

Googleマテリアルアイコンはこちら

アイコンギャラリーサイト

アイコンギャラリーサイト Dribbble

Dribbbleでもアイコンパックをダウンロードすることができます。丸くて可愛いものからエッジが効いててクールなものまで種類が豊富。

特徴的なデザインのマテリアルアイコンが欲しいならここをチェックしてみましょう。

Dribbbleのマテリアルアイコンはこちら

アイコンギャラリーサイト FlatIcon

8万種類以上のアイコンが登録されているギャラリーサイト。無料で使用できるものも多いので探してみると意外と使えるデザインのアイコンが見つかるかも。

FlatIconのアイコンはこちら

Figmaで使えるマテリアルアイコンライブラリ

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>

表示はこのようになります。

Googleマテリアルアイコンの使い方 全てのアイコンを使えるようにする

他のアイコンにする場合はfaceのところをアイコン名に変更すればいいだけです。例えば検索アイコンならsearchにすればいいので、

<span class="material-icons">search</span>

こうなります。

アイコン名はGoogleのマテリアルアイコン一覧ページに全て掲載されているのでこちらを見てください。

必要なアイコンだけ個別に使えるようにする

もう1つの方法は必要なアイコンだけを個別にダウンロードしたり読み込んで使用する方法です。あまり大きなCSSファイルを読み込みたくない場合や必要なアイコンが少ししかない場合はこちらの方法にします。

やり方はGoogleのマテリアルアイコン一覧ページから欲しいアイコンをクリックして右側のパネルを表示し、パネルの下にあるダウンロードボタンを押して画像ファイルとしてダウンロードします。

Googleマテリアルアイコンの使い方 必要なアイコンだけ個別に使えるようにする

あとは画像ファイルとして読み込めば表示されるようになります。

<img src="./home_FILL0_wght400_GRAD0_opsz48.svg" alt="">

アイコンの表示ができたので、次はサイズや色の変更方法について紹介します。

Googleマテリアルアイコンのカスタマイズ方法

アイコンのカスタマイズ方法には次のような方法があります。

  • カスタマイズしたアイコンをダウンロードする
  • CSSでアイコンデザインをカスタマイズする
  • Figmaでデザインしたものを使用する

以下で詳しく紹介します。

カスタマイズしたアイコンをダウンロードする

1つ目はアイコン一覧ページでサイズや線の太さをカスタマイズしてからSVGやPNGでダウンロードする方法。

アイコン一覧ページの右側にある編集用のパネルで線の太さやサイズなどをある程度カスタマイズすることができます。

Googleマテリアルアイコンのカスタマイズ方法 カスタマイズしたアイコンをダウンロードする

ここで調整したものをダウンロードすることでカスタマイズしたアイコンを使うことができるようになります。

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マテリアルアイコンのカスタマイズ方法 Figmaでデザインしたものを使用する

デザインの時点で見た目を調整してから使えるのでこちらの方がやりやすいですね。

まとめ

この記事ではマテリアルアイコンライブラリ一覧と、よく使われるGoogleマテリアルアイコンの使い方について紹介しました。

Webサイトでも使いやすいアイコンが揃ってるのでFigmaファイルをダウンロードしておくと便利です。