Material Icons

Material icons are distributed by Google under the Apache License 2.0.

Shown here is the subset that I use most often. Many more are available at Material Icons. Click any icon below to copy the html.

account_box account_circle add_a_photo add add_box add_circle add_circle_outline announcement apps archive arrow_back arrow_downward arrow_drop_down arrow_drop_down_circle arrow_drop_up arrow_forward arrow_upward aspect_ratio assignment assignment_ind assignment_late assignment_return assignment_returned assignment_turned_in attach_file attach_money attachment autorenew book bookmark bookmark_border business_center cached cancel card_giftcard card_membership card_travel chat chat_bubble chat_bubble_outline check check_box check_box_outline_blank check_circle close cloud cloud_download cloud_upload content_copy content_cut content_paste control_point create_new_folder credit_card crop dashboard date_range delete description do_not_disturb_on drafts drag_handle edit equalizer error error_outline euro_symbol favorite favorite_border file_download file_upload filter_list flag folder folder_open folder_shared folder_special forum fullscreen fullscreen_exit grade grid_on group group_add headset help help_outline highlight_off history home import_contacts inbox indeterminate_check_box info info_outline insert_chart insert_comment insert_drive_file keyboard_arrow_down keyboard_arrow_left keyboard_arrow_right keyboard_arrow_up first_page last_page label label_outline language launch local_mall local_movies local_offer local_see local_shipping lock lock_open lock_outline loop mail mail_outline menu mic mic_off monetization_on more more_horiz more_vert new_releases note_add notifications open_with payment people person person_add photo photo_album photo_camera picture_as_pdf place play_arrow play_circle_filled play_circle_outline playlist_add poll portrait print public queue_music radio_button_checked radio_button_unchecked receipt recent_actors redo refresh remove_circle remove_circle_outline replay reply reply_all report report_problem rss_feed save schedule school search security send settings share shopping_cart star star_border star_half stars style sync thumb_down thumb_up today unarchive undo update verified_user videocam videocam_off view_carousel view_comfy view_list voice_chat volume_off volume_up vpn_key warning watch_later work zoom_in zoom_out zoom_out_map toggle_off toggle_on
Using Material Icons in CSS
To use a Material Icon as CSS pseudo content (:before, :after), use the code instead of the ligature so you get IE9+ support. The (almost) full list of codes is available on Github. Toggle_on and toggle_off are e9f6 and e9f5. In your CSS, this would look like content:"\e9f5".
Sizes
It is recommended you follow the Material Icons developer guidelines from Google.
CDN
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Why choose Material Icons?
Familiar: These icon designs are used in Android OS, which currently has about 86% market share in smartphones.
Useful: This set appears to be designed for applications and has icons for most common tasks.

See the Pen Material Icons codes by btn.ninja (@btn-ninja) on CodePen.