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

2021-05-19OtherGoogle,アイコンフォント

GoogleのMaterial iconsは、無料で利用できるマテリアルデザインのアイコンが多数あり、SVGやPNGで保存できる他、アイコンフォントとしても利用できます。

Webサイトで簡単に利用する方法については以下をご覧ください。

 

Material icons

「Material icons」はGoogleフォントになる為、表示速度が速い事が特徴です。（Google推奨なのも利点）

無料アイコンの数は、現在1,800種類以上。
Material Icons

デザインパターン

Outline・Field

home

Sharp

Two tone

 

サイズ指定

＜以下のように記述したサンプル＞

home
home
home

 

色指定

サイズ変更の際と同様に、スタイルを記述すれば可能です。

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>
email	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>
facebook	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>