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

OtherGoogle,アイコンフォント

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

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

 

Material icons

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

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

デザインパターン

Material icons

Outline・Field

home

<span class="material-icons-outlined">アイコン名</span>

Sharp
Material icons:Sharp

<span class="material-icons-sharp">アイコン名</span>

Two tone

Material icons: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>

home
home
home

 

色指定

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

<span class="material-icons" style="font-size: 24px; color: pink;">home</span>

home

 

よく使いそうなアイコンとコード

アイコンコードHTML
homee88a<span class="material-icons-outlined">home</span>
searche8b6<span class="material-icons-outlined">search</span>
help_outlinee8fd<span class="material-icons-outlined">help_outline</span>
add_circle_outlinee148<span class="material-icons-outlined">add_circle_outline</span>
favorite_bordere87e<span class="material-icons-outlined">favorite_border</span>
favoritee87d<span class="material-icons-outlined">favorite</span>
local_offere54e <span class="material-icons-outlined">local_offer</span> 
emaile0be<span class="material-icons-outlined">email</span>
calle0b0<span class="material-icons-outlined">call</span>
phone_in_talke61d <span class="material-icons-outlined">phone_in_talk</span> 
phonelink_ringe0dd<span class="material-icons-outlined">phonelink_ring</span>
phone_iphonee325<span class="material-icons-outlined">phone_iphone</span>
laptope31e<span class="material-icons-outlined">laptop</span>
keyboarde312<span class="material-icons-outlined">keyboard</span>
headset_mice311<span class="material-icons-outlined">headset_mic</span>
mousee323<span class="material-icons-outlined">mouse</span>?
locke897<span class="material-icons-outlined">lock</span>
linke157<span class="material-icons-outlined">link</span>
facebookf234<span class="material-icons-outlined">facebook</span>
thumb_up_off_alte9f3<span class="material-icons-outlined">thumb_up_off_alt</span>
error_outlinee001<span class="material-icons-outlined">error_outline</span>
priority_highe645 <span class="material-icons-outlined">priority_high</span> 
play_circlee1c4<span class="material-icons-outlined">play_circle</span>
fmd_goodf00f<span class="material-icons-outlined">fmd_good</span>
fmd_badf00e<span class="material-icons-outlined">fmd_bad</span>
star_outlinef06f<span class="material-icons-outlined">star_outline</span>
stare838 <span class="material-icons-outlined">star</span>
settingse8b8<span class="material-icons-outlined">settings</span>
donee876<span class="material-icons-outlined">done</span>
check_circle_outlinee92d<span class="material-icons-outlined">check_circle_outline</span>
check_boxe834 <span class="material-icons-outlined">check_box</span> 
content_pastee14f<span class="material-icons-outlined">content_paste</span>
description e873<span class="material-icons-outlined">description</span>
mode_edit_outlinef035<span class="material-icons-outlined">mode_edit_outline</span>
tips_and_updatese79a<span class="material-icons-outlined">tips_and_updates</span>
mode_commente253<span class="material-icons-outlined">mode_comment</span>
languagee894<span class="material-icons-outlined">language</span>
builde869<span class="material-icons-outlined">build</span>
arrow_forwarde5c8 <span class="material-icons-outlined">arrow_forward</span> 
arrow_backe5c4 <span class="material-icons-outlined">arrow_back</span> 
chevron_righte5cc <span class="material-icons-outlined">chevron_right</span> 
chevron_lefte5cb <span class="material-icons-outlined">chevron_left</span> 
double_arrowea50 <span class="material-icons-outlined">double_arrow</span> 
file_downloade2c4<span class="material-icons-outlined">file_download</span>
file_uploade2c6<span class="material-icons-outlined">file_upload</span>?
cloud_downloade2c0<span class="material-icons-outlined">cloud_download</span>
cloud_uploade2c3<span class="material-icons-outlined">cloud_upload</span>
shopping_carte8cc <span class="material-icons-outlined">shopping_cart</span>
add_shopping_carte854<span class="material-icons-outlined">add_shopping_cart</span>

 

 

関連記事