Google Icons
home

home

local_shipping

local_shipping

local_post_office

local_post_office

phone_enabled

phone_enabled

phone_disabled

phone_disabled

call

call

local_phone

local_phone

phone_in_talk

phone_in_talk

local_grocery_store

local_grocery_store

shopping_cart

shopping_cart

add_shopping_cart

add_shopping_cart

arrow_back

arrow_back

arrow_upward

arrow_upward

cancel

cancel

check

check

done

done

check_circle

check_circle

close

close

clear

clear

add

add

remove

remove

add_circle_outline

add_circle_outline

remove_circle_outline

remove_circle_outline

expand_less

expand_less

expand_more

expand_more

chevron_left

chevron_left

chevron_right

chevron_right

first_page

first_page

last_page

last_page

fast_forward

fast_forward

fast_rewind

fast_rewind

play_arrow

play_arrow

skip_next

skip_next

skip_previous

skip_previous

looks_one

looks_one

looks_two

looks_two

looks_3

looks_3

looks_4

looks_4

looks_5

looks_5

looks_6

looks_6

navigate_before

navigate_before

navigate_next

navigate_next

menu

menu

more_horiz

more_horiz

more_vert

more_vert

refresh

refresh

grade

grade

star

star

star_rate

star_rate

stars

stars

star_border

star_border

copyright

copyright

credit_card

credit_card

delete

delete

delete_forever

delete_forever

delete_outline

delete_outline

highlight_off

highlight_off

help

help

help_outline

help_outline

lock

lock

lock_open

lock_open

lock_outline

lock_outline

schedule

schedule

search

search

settings

settings

shopping_cart

shopping_cart

subject

subject

zoom_in

zoom_in

mail_outline

mail_outline

message

message

add_box

add_box

add_circle

add_circle

add_circle_outline

add_circle_outline

clear

clear

edit

edit

content_copy

content_copy

create

create

border_color

border_color

mode_edit

mode_edit

contact_phone

contact_phone

contacts

contacts

contact_mail

contact_mail

opacity

opacity

open_in_new

open_in_new

announcement

announcement

eco

eco

favorite

favorite

favorite_border

favorite_border

thumb_down

thumb_down

thumb_up

thumb_up

timeline

timeline

trending_flat

trending_flat

error

error

error_outline

error_outline

warning

warning

insert_photo

insert_photo

headset_mic

headset_mic

phone_android

phone_android

laptop_windows

laptop_windows

computer

computer

access_time

access_time

alarm

alarm

access_alarm

access_alarm

watch

watch

folder

folder

folder_open

folder_open

exposure_neg_1

exposure_neg_1

exposure_plus_1

exposure_plus_1

fullscreen

fullscreen

fullscreen_exit

fullscreen_exit

live_tv

live_tv

notifications

notifications

notifications_active

notifications_active

person

person


Applications

<i class="material-icons">{icon name}</i>

css basic

/* Rules for sizing the icon. */ .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; } /* Rules for using icons as black on a light background. */ .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } /* Coloring */ .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } .material-icons.md-light { color: rgba(255, 255, 255, 1); } .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } .material-icons.orange600 { color: #FB8C00; } /* Rules for using icons as white on a dark background. */ .material-icons.md-light { color: rgba(255, 255, 255, 1); } .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } SVG material-design-icons/*/svg/production/ material-design-icons/maps/svg/production/ PNG material-design-icons/*/1x_web/ material-design-icons/*/2x_web/
face face

Theme


Theme 사용을 위한 CDN 설정

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">

Theme 사용 예

<i class="material-icons" style="font-size:100px;">perm_phone_msg</i> <i class="material-icons-outlined" style="font-size:100px;">perm_phone_msg</i> <i class="material-icons-round" style="font-size:100px;">perm_phone_msg</i> <i class="material-icons-two-tone" style="font-size:100px;">perm_phone_msg</i> <i class="material-icons-sharp" style="font-size:100px;">perm_phone_msg</i> perm_phone_msg perm_phone_msg perm_phone_msg perm_phone_msg perm_phone_msg

구글 아이콘 전체보기



 Awesome 5 Icons
fa fa-home
fa fa-navicon
fa fa-circle
fa fa-circle-o
fa fa-circle-thin
fa fa-dot-circle-o
fa fa-close
fa fa-copyright
fa fa-credit-card
fa fa-edit
fa fa-ellipsis-h
fa fa-ellipsis-v
fa fa-envelope
fa fa-envelope-o
fa fa-fax
fa fa-key
fa fa-lock
fa fa-microphone
fa fa-pencil
fa fa-pencil-square
fa fa-pencil-square-o
fa fa-percent
fa fa-phone
fa fa-phone-square
fa fa-volume-control-phone
fa fa-volume-up
fa fa-question
fa fa-question-circle
fa fa-question-circle-o
fa fa-remove
fa fa-search
fa fa-square
fa fa-square-o
fa fa-star
fa fa-star-o
fa fa-thumb-tack
fa fa-thumbs-down
fa fa-thumbs-o-up
fa fa-thumbs-up
fa fa-times
fa fa-times-circle
fa fa-times-circle-o
fa fa-times-rectangle
fa fa-times-rectangle-o
fa fa-trash
fa fa-trash-o
fa fa-user
fa fa-user-o
fa fa-window-close
fa fa-window-close-o
fa fa-twitter
fa fa-facebook
fa fa-tumblr
fa fa-youtube
fa fa-krw
fa fa-angle-left
fa fa-angle-right
fa fa-angle-double-left
fa fa-angle-double-right
fa fa-angle-down
fa fa-angle-up
fa fa-angle-double-down
fa fa-angle-double-up
fa fa-arrow-circle-down
fa fa-arrow-circle-left
fa fa-arrow-circle-right
fa fa-arrow-circle-up
fa fa-arrow-circle-o-down
fa fa-arrow-circle-o-left
fa fa-arrow-circle-o-right
fa fa-arrow-circle-o-up
fa fa-arrow-down
fa fa-arrow-left
fa fa-arrow-right
fa fa-arrow-up
fa fa-caret-down
fa fa-caret-left
fa fa-caret-right
fa fa-arrows-alt
fa fa-caret-up
fa fa-caret-square-o-down
fa fa-caret-square-o-left
fa fa-caret-square-o-right
fa fa-caret-square-o-up
fa fa-chevron-circle-down
fa fa-chevron-circle-left
fa fa-chevron-circle-right
fa fa-chevron-circle-up
fa fa-chevron-down
fa fa-chevron-left
fa fa-chevron-right
fa fa-chevron-up
fa fa-hand-o-right
fa fa-thumbs-o-down
fa fa-thumbs-o-up
fa fa-check-square
fa fa-check-square-o
fa fa-circle
fa fa-circle-o
fa fa-dot-circle-o
fa fa-minus
fa fa-minus-circle
fa fa-minus-square
fa fa-minus-square-o
fa fa-plus
fa fa-plus-circle
fa fa-plus-square
fa fa-plus-square-o
fa fa-square
fa fa-square-o
fa fa-genderless
fa fa-file-text-o
fa fa-truck
fa fa-truck-moving
fa fa-bell
fa fa-bell-o
fa fa-bullhorn
fa fa-calculator
fa fa-calendar
fa fa-calendar-o
fa fa-cart-arrow-down
fa fa-cart-plus
fa fa-shopping-bag
fa fa-shopping-basket
fa fa-shopping-cart
fa fa-asterisk
fa fa-award
fa fa-bars
fa fa-book
fa fa-book-open
fa fa-book-reader
fa fa-box
fa fa-box-open
fa fa-bullhorn
fa fa-credit-card


Example

<i class="fas fa-clock" style="font-size:120px;color:#2196F3"></i> <i class="far fa-clock" style="font-size:120px;color:#2196F3"></i>

Sizing Icons

<i class="fas fa-clock fa-xs"></i> <i class="fas fa-clock fa-sm"></i> <i class="fas fa-clock fa-lg"></i> <i class="fas fa-clock fa-1x"></i> <i class="fas fa-clock fa-2x"></i> <i class="fas fa-clock fa-3x"></i> <i class="fas fa-clock fa-4x"></i> <i class="fas fa-clock fa-5x"></i> <i class="fas fa-clock fa-6x"></i> <i class="fas fa-clock fa-7x"></i> <i class="fas fa-clock fa-8x"></i> <i class="fas fa-clock fa-9x"></i> <i class="fas fa-clock fa-10x"></i>

List Icons

<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List icons</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li> <li><i class="fa-li fa fa-square"></i>List icons</li> </ul>

Animated Icons

<i class="fas fa-spinner fa-spin"></i> <i class="fas fa-circle-notch fa-spin"></i> <i class="fas fa-sync-alt fa-spin"></i> <i class="fas fa-cog fa-spin"></i> <i class="fas fa-cog fa-pulse"></i> <i class="fas fa-spinner fa-pulse"></i>

Rotated and Flipped Icons

<i class="fas fa-horse"></i> <i class="fas fa-horse fa-rotate-90"></i> <i class="fas fa-horse fa-rotate-180"></i> <i class="fas fa-horse fa-rotate-270"></i> <i class="fas fa-horse fa-flip-horizontal"></i> <i class="fas fa-horse fa-flip-vertical"></i>

Stacked Icons

<span class="fa-stack fa-lg"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fab fa-twitter fa-stack-1x fa-inverse"></i> </span> fa-twitter (inverse) on fa-circle (solid)<br> <span class="fa-stack fa-lg"> <i class="far fa-circle fa-stack-2x"></i> <i class="fab fa-twitter fa-stack-1x"></i> </span> fa-twitter on fa-circle (regular)<br> <span class="fa-stack fa-lg"> <i class="fas fa-camera fa-stack-1x"></i> <i class="fas fa-ban fa-stack-2x text-danger" style="color:red;"></i> </span> fa-ban on fa-camera fa-twitter (inverse) on fa-circle (solid)
fa-twitter on fa-circle (regular)
fa-ban on fa-camera

Fixed Width Icons

Just like letters and other characters, icons can have different widths, and if you need to vertically align icons like in a list or a menu, this can be a problem. The fa-fw class is used to set icons at a fixed width. <p>Fixed Width:</p> <div><i class="fas fa-arrows-alt-v fa-fw"></i> Icon 1</div> <div><i class="fas fa-band-aid fa-fw"></i> Icon 2</div> <div><i class="fab fa-bluetooth-b fa-fw"></i> Icon 3</div> <p>Without Fixed Width:</p> <div><i class="fas fa-arrows-alt-v"></i> Icon 1</div> <div><i class="fas fa-band-aid"></i> Icon 2</div> <div><i class="fab fa-bluetooth-b"></i> Icon 3</div>

Fixed Width:

Icon 1
Icon 2
Icon 3

Without Fixed Width:

Icon 1
Icon 2
Icon 3


Bordered and Pulled Icons

The fa-border, fa-pull-right or fa-pull-left classes are used for for pull quotes or article icons.