Googleマテリアルアイコン:よく使うアイコンコード50種

GoogleのMaterial iconsは、無料で利用できるマテリアルデザインのアイコンが多数あり、SVGやPNGで保存できる他、アイコンフォントとしても利用できます。
Webサイトで簡単に利用する方法については以下をご覧ください。
Material icons
「Material icons」はGoogleフォントになる為、表示速度が速い事が特徴です。(Google推奨なのも利点)
無料アイコンの数は、現在1,800種類以上。
Material Icons
デザインパターン
Outline・Field
home
<span class="material-icons-outlined">アイコン名</span>
<span class="material-icons-sharp">アイコン名</span>
Two tone
<span class="material-icons-two-tone">アイコン名</span>
サイズ指定
<span class="material-icons" style="font-size: 18px;">home</span>
<以下のように記述したサンプル>
<span class="material-icons">home</span>
<span class="material-icons" style="font-size: 18px;">home</span>
<span class="material-icons" style="font-size: 22px;">home</span>
<span class="material-icons" style="font-size: 18px;">home</span>
<span class="material-icons" style="font-size: 22px;">home</span>
home
home
home
色指定
サイズ変更の際と同様に、スタイルを記述すれば可能です。
<span class="material-icons" style="font-size: 24px; color: pink;">home</span>
home
よく使いそうなアイコンとコード
アイコン | コード | HTML |
---|---|---|
home | e88a | <span class="material-icons-outlined">home</span> |
search | e8b6 | <span class="material-icons-outlined">search</span> |
help_outline | e8fd | <span class="material-icons-outlined">help_outline</span> |
add_circle_outline | e148 | <span class="material-icons-outlined">add_circle_outline</span> |
error_outline | e001 | <span class="material-icons-outlined">error_outline</span> |
favorite_border | e87e | <span class="material-icons-outlined">favorite_border</span> |
favorite | e87d | <span class="material-icons-outlined">favorite</span> |
music_note | e405 | <span class="material-icons-outlined">music_note</span> |
local_offer | e54e | <span class="material-icons-outlined">local_offer</span> |
loyalty | e89a | <span class="material-icons-outlined">loyalty</span> |
e0be | <span class="material-icons-outlined">email</span> | |
call | e0b0 | <span class="material-icons-outlined">call</span> |
phone_in_talk | e61d | <span class="material-icons-outlined">phone_in_talk</span> |
phonelink_ring | e0dd | <span class="material-icons-outlined">phonelink_ring</span> |
phone_iphone | e325 | <span class="material-icons-outlined">phone_iphone</span> |
laptop | e31e | <span class="material-icons-outlined">laptop</span> |
keyboard | e312 | <span class="material-icons-outlined">keyboard</span> |
headset_mic | e311 | <span class="material-icons-outlined">headset_mic</span> |
mouse | e323 | <span class="material-icons-outlined">mouse</span>? |
photo_camera | e412 | <span class="material-icons-outlined">photo_camera</span>? |
image | e3f4 | <span class="material-icons-outlined">image</span>? |
palette | e40a | <span class="material-icons-outlined">palette</span>? |
lock | e897 | <span class="material-icons-outlined">lock</span> |
link | e157 | <span class="material-icons-outlined">link</span> |
f234 | <span class="material-icons-outlined">facebook</span> | |
thumb_up_off_alt | e9f3 | <span class="material-icons-outlined">thumb_up_off_alt</span> |
thumb_down_off_alt | e9f2 | <span class="material-icons-outlined">thumb_down_off_alt</span> |
mode_comment | e253 | <span class="material-icons-outlined">mode_comment</span> |
comment_bank | ea4e | <span class="material-icons-outlined">comment_bank</span> |
priority_high | e645 | <span class="material-icons-outlined">priority_high</span> |
play_circle | e1c4 | <span class="material-icons-outlined">play_circle</span> |
fmd_good | f00f | <span class="material-icons-outlined">fmd_good</span> |
fmd_bad | f00e | <span class="material-icons-outlined">fmd_bad</span> |
star_outline | f06f | <span class="material-icons-outlined">star_outline</span> |
star | e838 | <span class="material-icons-outlined">star</span> |
settings | e8b8 | <span class="material-icons-outlined">settings</span> |
lock | e897 | <span class="material-icons-outlined">lock</span> |
done | e876 | <span class="material-icons-outlined">done</span> |
check_circle_outline | e92d | <span class="material-icons-outlined">check_circle_outline</span> |
check_box | e834 | <span class="material-icons-outlined">check_box</span> |
content_paste | e14f | <span class="material-icons-outlined">content_paste</span> |
description | e873 | <span class="material-icons-outlined">description</span> |
mode_edit_outline | f035 | <span class="material-icons-outlined">mode_edit_outline</span> |
tips_and_updates | e79a | <span class="material-icons-outlined">tips_and_updates</span> |
language | e894 | <span class="material-icons-outlined">language</span> |
build | e869 | <span class="material-icons-outlined">build</span> |
arrow_forward | e5c8 | <span class="material-icons-outlined">arrow_forward</span> |
arrow_back | e5c4 | <span class="material-icons-outlined">arrow_back</span> |
chevron_right | e5cc | <span class="material-icons-outlined">chevron_right</span> |
chevron_left | e5cb | <span class="material-icons-outlined">chevron_left</span> |
double_arrow | ea50 | <span class="material-icons-outlined">double_arrow</span> |
file_download | e2c4 | <span class="material-icons-outlined">file_download</span> |
file_upload | e2c6 | <span class="material-icons-outlined">file_upload</span>? |
cloud_download | e2c0 | <span class="material-icons-outlined">cloud_download</span> |
cloud_upload | e2c3 | <span class="material-icons-outlined">cloud_upload</span> |
shopping_cart | e8cc | <span class="material-icons-outlined">shopping_cart</span> |
add_shopping_cart | e854 | <span class="material-icons-outlined">add_shopping_cart</span> |
関連記事
タグ
関連記事


ルクセリタスのメニューにアイコンフォントを使う方法
ルクセリタスで使えるアイコンフォントは、「Material Icons」と「Fo ...


初心者向け!Google Serch Consoleの新規設定とアナリティクス連携
Google Serch Consoleとは Googleが提供するGoogle ...


Google Adsense審査落選~通過まで・審査基準の目安や必要コンテンツなど
はじめに なかなか審査結果が出ない方や、審査に通らない方の参考になればと、当サイ ...


Googleマテリアルアイコンの使い方とよく使うアイコンコード
GoogleのMaterial iconsは、無料で利用できるマテリアルデザイン ...


Googleアドセンス自動広告-広告タイプ詳細と設定方法+手動広告(広告ユニット)
はじめに Googleアドセンスの広告は、表示したい場所、内容、形式、サイズなど ...
ディスカッション
コメント一覧
まだ、コメントがありません