Icons

Documentation and usage examples for the .ms-icon utility defined in src/scss/components/_icons.scss.

Overview

The .ms-icon class provides consistent sizing, vertical alignment and color helpers for iconography (font icons and SVG). Use the modifier classes to adjust size and semantic color.

Base class: .ms-icon
Size modifiers: .ms-icon--sm, .ms-icon--md, .ms-icon--lg, .ms-icon--xl
Color modifiers: .ms-icon--primary, .ms-icon--success, .ms-icon--danger, .ms-icon--warning, .ms-icon--muted

Font icon (Material Icons)

Use the Material Icons font and add ms-icon to control size and color. Decorative icons should include aria-hidden="true".

Small

Medium

Large (primary)

<i class="material-icons ms-icon ms-icon--lg ms-icon--primary" aria-hidden="true">settings</i>

Accessibility

Decorative icons: include aria-hidden="true" so they are ignored by assistive tech.
Informative icons: provide accessible text via <title> inside inline SVGs or alt text on <img>.
Icon-only buttons: pair with an accessible label (visually-hidden text or aria-label).

Button & inline usage

Examples showing icons in buttons and inline text.

<button class="ms-btn"><i class="material-icons ms-icon ms-icon--md" aria-hidden="true">send</i> Send</button>

Icon reference

All icon glyphs available via the Material Icons font and any standalone SVG assets included in the repository. Browse categories to find the icon name.

Navigation & UI (80)

accessible_forward

add_home

add_home_work

add_to_home_screen

arrow_back

arrow_back_ios

arrow_back_ios_new

arrow_circle_down

arrow_circle_left

arrow_circle_right

arrow_circle_up

arrow_downward

arrow_drop_down

arrow_drop_down_circle

arrow_drop_up

arrow_forward

arrow_forward_ios

arrow_left

arrow_outward

arrow_right

arrow_right_alt

arrow_upward

back_hand

backpack

backspace

backup

backup_table

broadcast_on_home

chevron_left

chevron_right

compare_arrows

door_back

double_arrow

expand

expand_circle_down

expand_less

expand_more

fast_forward

feedback

first_page

flip_to_back

forward

forward_10

forward_30

forward_5

forward_to_inbox

home

home_max

home_mini

home_repair_service

home_work

keyboard_arrow_down

keyboard_arrow_left

keyboard_arrow_right

keyboard_arrow_up

keyboard_backspace

keyboard_double_arrow_down

keyboard_double_arrow_left

keyboard_double_arrow_right

keyboard_double_arrow_up

last_page

maps_home_work

menu_book

menu_open

navigation

no_backpack

phone_callback

phone_forwarded

photo_camera_back

play_arrow

restaurant_menu

settings_backup_restore

subdirectory_arrow_left

subdirectory_arrow_right

unfold_less

unfold_less_double

unfold_more

unfold_more_double

video_camera_back

Actions & Editor (212)

30fps_select

60fps_select

add

add_a_photo

add_alarm

add_alert

add_box

add_business

add_card

add_chart

add_circle

add_circle_outline

add_comment

add_ic_call

add_link

add_location

add_location_alt

add_moderator

add_photo_alternate

add_reaction

add_road

add_shopping_cart

add_task

add_to_drive

add_to_photos

add_to_queue

addchart

admin_panel_settings

alarm_add

app_settings_alt

auto_delete

autofps_select

battery_saver

bluetooth_searching

bookmark_add

bookmark_added

bookmark_remove

border_clear

cancel_schedule_send

clear

clear_all

cloud_download

cloud_upload

content_paste_search

create

create_new_folder

credit_card

credit_card_off

credit_score

data_saver_off

data_saver_on

delete

delete_forever

delete_outline

delete_sweep

deselect

display_settings

domain_add

download

download_done

download_for_offline

downloading

drive_folder_upload

edit

edit_attributes

edit_calendar

edit_location

edit_location_alt

edit_note

edit_notifications

edit_off

edit_road

emergency_share

file_download

file_download_done

file_download_off

file_upload

filter

filter_1

filter_2

filter_3

filter_4

filter_5

filter_6

filter_7

filter_8

filter_9

filter_9_plus

filter_alt

filter_alt_off

filter_b_and_w

filter_center_focus

filter_drama

filter_frames

filter_hdr

filter_list

filter_list_off

filter_none

filter_tilt_shift

filter_vintage

folder_delete

folder_shared

font_download

font_download_off

format_clear

group_add

group_remove

hdr_auto_select

hdr_enhanced_select

hdr_off_select

hdr_on_select

image_search

imagesearch_roller

ios_share

layers_clear

leak_add

leak_remove

library_add

library_add_check

location_searching

manage_search

mobile_screen_share

mode_edit

mode_edit_outline

movie_filter

note_add

notification_add

offline_share

padding

panorama_horizontal_select

panorama_photosphere_select

panorama_vertical_select

panorama_wide_angle_select

person_add

person_add_alt

person_add_alt_1

person_add_disabled

person_remove

person_remove_alt_1

person_search

photo_filter

photo_size_select_actual

photo_size_select_large

photo_size_select_small

playlist_add

playlist_add_check

playlist_add_check_circle

playlist_add_circle

playlist_remove

post_add

power_settings_new

quickreply

redo

remove

remove_circle

remove_circle_outline

remove_done

remove_from_queue

remove_moderator

remove_red_eye

remove_road

remove_shopping_cart

reply_all

save

save_alt

save_as

saved_search

schedule_send

screen_search_desktop

screen_share

search_off

select_all

send

send_and_archive

send_time_extension

send_to_mobile

settings

settings_accessibility

settings_applications

settings_bluetooth

settings_brightness

settings_cell

settings_ethernet

settings_input_antenna

settings_input_component

settings_input_composite

settings_input_hdmi

settings_input_svideo

settings_overscan

settings_phone

settings_power

settings_remote

settings_suggest

settings_system_daydream

settings_voice

share_location

sim_card_download

sports_kabaddi

stop_screen_share

switch_access_shortcut_add

tab_unselected

timer_10_select

timer_3_select

tune

undo

upload

upload_file

video_settings

youtube_searched_for

Files & Storage (25)

Media & Image (102)

airline_stops

airplay

assistant_photo

broken_image

camera

camera_alt

camera_enhance

camera_front

camera_indoor

camera_outdoor

camera_rear

camera_roll

cameraswitch

control_camera

dynamic_feed

dynamic_form

featured_play_list

featured_video

flip_camera_android

flip_camera_ios

headset_mic

hide_image

image

image_aspect_ratio

image_not_supported

insert_photo

library_music

linked_camera

local_movies

local_play

mic

mic_external_off

mic_external_on

mic_none

mic_off

microwave

missed_video_call

monochrome_photos

motion_photos_auto

motion_photos_off

motion_photos_on

motion_photos_pause

motion_photos_paused

movie

movie_creation

multiple_stop

music_note

music_off

music_video

no_photography

notifications_paused

ondemand_video

panorama_photosphere

pause

pause_circle

pause_circle_filled

pause_circle_outline

pause_presentation

perm_camera_mic

personal_video

phone_paused

photo

photo_album

photo_camera

photo_camera_front

photo_library

play_circle

play_circle_filled

play_circle_outline

play_disabled

play_for_work

play_lesson

playlist_play

queue_music

queue_play_next

replay

replay_10

replay_30

replay_5

replay_circle_filled

ring_volume

slow_motion_video

smart_display

stop

stop_circle

switch_camera

switch_video

tap_and_play

video_call

video_camera_front

video_chat

video_label

video_library

video_stable

videocam

videocam_off

videogame_asset

videogame_asset_off

volume_down

volume_mute

volume_off

volume_up

Social & People (76)

account_balance

account_balance_wallet

account_box

account_circle

account_tree

broadcast_on_personal

child_friendly

emoji_emotions

emoji_events

emoji_food_beverage

emoji_nature

emoji_objects

emoji_people

emoji_symbols

emoji_transportation

face

face_2

face_3

face_4

face_5

face_6

face_retouching_natural

face_retouching_off

favorite

favorite_border

group

group_off

group_work

groups

groups_2

groups_3

lock_person

manage_accounts

mobile_friendly

nature_people

no_accounts

not_started

people

people_alt

people_outline

person

person_2

person_3

person_4

person_off

person_outline

person_pin

person_pin_circle

personal_injury

restart_alt

sentiment_dissatisfied

sentiment_neutral

sentiment_satisfied

sentiment_satisfied_alt

sentiment_very_dissatisfied

sentiment_very_satisfied

speaker_group

star

star_border

star_border_purple500

star_half

star_outline

star_purple500

star_rate

stars

start

supervisor_account

switch_account

tag_faces

thumb_down

thumb_down_alt

thumb_down_off_alt

thumb_up

thumb_up_alt

thumb_up_off_alt

thumbs_up_down

Communication (64)

alternate_email

call

call_end

call_made

call_merge

call_missed

call_missed_outgoing

call_received

call_split

call_to_action

chat

chat_bubble

chat_bubble_outline

comment

comment_bank

comments_disabled

connect_without_contact

contact_emergency

contact_mail

contact_page

contact_phone

contact_support

contactless

contacts

forum

headphones

headphones_battery

import_contacts

insert_comment

local_phone

mark_chat_read

mark_chat_unread

mark_email_read

mark_email_unread

mark_unread_chat_alt

message

mode_comment

perm_contact_calendar

perm_phone_msg

phone

phone_android

phone_bluetooth_speaker

phone_disabled

phone_enabled

phone_iphone

phone_locked

phone_missed

phonelink

phonelink_erase

phonelink_lock

phonelink_off

phonelink_ring

phonelink_setup

smartphone

sms

sms_failed

speaker_phone

swap_calls

textsms

voice_chat

voicemail

wifi_calling

wifi_calling_3

Maps & Places (80)

directions

directions_bike

directions_boat

directions_boat_filled

directions_bus

directions_bus_filled

directions_car

directions_car_filled

directions_off

directions_railway

directions_railway_filled

directions_run

directions_subway

directions_subway_filled

directions_transit

directions_transit_filled

directions_walk

fiber_pin

find_replace

fireplace

hotel

hotel_class

local_activity

local_airport

local_atm

local_bar

local_cafe

local_car_wash

local_convenience_store

local_dining

local_drink

local_fire_department

local_florist

local_gas_station

local_grocery_store

local_hospital

local_hotel

local_laundry_service

local_library

local_mall

local_offer

local_parking

local_pharmacy

local_pizza

local_police

local_post_office

local_printshop

local_see

local_shipping

local_taxi

location_city

location_disabled

location_off

location_on

map

maps_ugc

my_location

near_me

near_me_disabled

network_ping

not_listed_location

offline_pin

pin_drop

pin_end

pin_invoke

pinch

place

push_pin

restaurant

shopping_bag

shopping_basket

shopping_cart

shopping_cart_checkout

table_restaurant

traffic

vaping_rooms

wrong_location

zoom_in_map

zoom_out_map

Commerce & Money (17)

money

money_off

money_off_csred

payment

payments

price_change

price_check

restore

restore_from_trash

restore_page

sell

shop

shop_2

shop_two

store

store_mall_directory

storefront

Notifications & Alerts (29)

battery_alert

bus_alert

circle_notifications

crisis_alert

doorbell

error

error_outline

escalator_warning

info

medical_information

nearby_error

no_encryption_gmailerrorred

notification_important

notifications

notifications_active

notifications_none

notifications_off

perm_device_information

railway_alert

report_gmailerrorred

running_with_errors

sd_card_alert

security_update_warning

sim_card_alert

system_security_update_warning

taxi_alert

warning

warning_amber

wifi_tethering_error

Devices & Hardware (68)

battery_0_bar

battery_1_bar

battery_2_bar

battery_3_bar

battery_4_bar

battery_5_bar

battery_6_bar

battery_charging_full

battery_full

battery_std

battery_unknown

bluetooth

bluetooth_audio

bluetooth_connected

bluetooth_disabled

cell_wifi

device_hub

device_thermostat

device_unknown

devices

devices_fold

devices_other

earbuds_battery

headset

headset_off

important_devices

keyboard

keyboard_alt

keyboard_capslock

keyboard_command_key

keyboard_control_key

keyboard_hide

keyboard_option_key

keyboard_return

keyboard_tab

keyboard_voice

media_bluetooth_off

media_bluetooth_on

mouse

network_wifi

network_wifi_1_bar

network_wifi_2_bar

network_wifi_3_bar

on_device_training

perm_scan_wifi

portable_wifi_off

signal_wifi_0_bar

signal_wifi_4_bar

signal_wifi_4_bar_lock

signal_wifi_bad

signal_wifi_connected_no_internet_4

signal_wifi_off

signal_wifi_statusbar_4_bar

signal_wifi_statusbar_connected_no_internet_4

signal_wifi_statusbar_null

usb

usb_off

wifi

wifi_1_bar

wifi_2_bar

wifi_channel

wifi_find

wifi_lock

wifi_off

wifi_password

wifi_protected_setup

wifi_tethering

wifi_tethering_off

Editor Tools (50)

align_horizontal_center

align_horizontal_left

align_horizontal_right

align_vertical_bottom

align_vertical_center

align_vertical_top

format_align_center

format_align_justify

format_align_left

format_align_right

format_bold

format_color_fill

format_color_reset

format_color_text

format_indent_decrease

format_indent_increase

format_italic

format_line_spacing

format_list_bulleted

format_list_numbered

format_list_numbered_rtl

format_overline

format_paint

format_quote

format_shapes

format_size

format_strikethrough

format_textdirection_l_to_r

format_textdirection_r_to_l

format_underlined

short_text

subtitles

subtitles_off

text_decrease

text_fields

text_format

text_increase

text_rotate_up

text_rotate_vertical

text_rotation_angledown

text_rotation_angleup

text_rotation_down

text_rotation_none

text_snippet

texture

title

vertical_align_bottom

vertical_align_center

vertical_align_top

wrap_text

Other (1319)

10k

10mp

11mp

123

12mp

13mp

14mp

15mp

16mp

17mp

18_up_rating

18mp

19mp

1k_plus

1x_mobiledata

20mp

21mp

22mp

23mp

24mp

2k_plus

2mp

30fps

360

3d_rotation

3g_mobiledata

3k_plus

3mp

4g_mobiledata

4g_plus_mobiledata

4k_plus

4mp

5k_plus

5mp

60fps

6_ft_apart

6k_plus

6mp

7k_plus

7mp

8k_plus

8mp

9k_plus

9mp

abc

ac_unit

access_alarm

access_alarms

access_time

access_time_filled

accessibility

accessibility_new

accessible

ad_units

adb

adf_scanner

adjust

ads_click

agriculture

air

airline_seat_flat

airline_seat_flat_angled

airline_seat_individual_suite

airline_seat_legroom_extra

airline_seat_legroom_normal

airline_seat_legroom_reduced

airline_seat_recline_extra

airline_seat_recline_normal

airlines

airplane_ticket

airplanemode_active

airplanemode_inactive

airport_shuttle

alarm

alarm_off

alarm_on

album

all_inbox

all_inclusive

all_out

alt_route

analytics

anchor

android

animation

announcement

aod

apartment

api

app_blocking

app_registration

app_shortcut

approval

apps

apps_outage

architecture

area_chart

art_track

article

aspect_ratio

assessment

assignment

assignment_ind

assignment_late

assignment_return

assignment_returned

assignment_turned_in

assist_walker

assistant

assistant_direction

assured_workload

atm

attractions

attribution

audiotrack

auto_awesome

auto_awesome_mosaic

auto_awesome_motion

auto_fix_high

auto_fix_normal

auto_fix_off

auto_graph

auto_mode

auto_stories

autorenew

av_timer

baby_changing_station

badge

bakery_dining

balance

balcony

ballot

bar_chart

batch_prediction

bathroom

bathtub

beach_access

bed

bedroom_baby

bedroom_child

bedroom_parent

bedtime

bedtime_off

beenhere

bento

bike_scooter

biotech

blender

blind

blinds

blinds_closed

block

bloodtype

blur_circular

blur_linear

blur_off

blur_on

bolt

book

book_online

bookmark

bookmark_border

bookmarks

border_all

border_bottom

border_color

border_horizontal

border_inner

border_left

border_outer

border_right

border_style

border_top

border_vertical

boy

branding_watermark

breakfast_dining

brightness_1

brightness_2

brightness_3

brightness_4

brightness_5

brightness_6

brightness_7

brightness_auto

brightness_high

brightness_low

brightness_medium

browse_gallery

browser_not_supported

browser_updated

brunch_dining

brush

bubble_chart

bug_report

build

build_circle

bungalow

burst_mode

business

business_center

cabin

cable

cached

cake

calculate

calendar_month

calendar_today

calendar_view_day

calendar_view_month

calendar_view_week

campaign

cancel

cancel_presentation

candlestick_chart

car_crash

car_rental

car_repair

card_giftcard

card_membership

card_travel

carpenter

cases

casino

cast

cast_connected

cast_for_education

castle

catching_pokemon

SVG assets (2)

heart.svg

star.svg

Modifiers reference

Class	Effect
`.ms-icon--sm`	Small icon (approx. 1.25rem)
`.ms-icon--md`	Medium icon (approx. 1.75rem)
`.ms-icon--lg`	Large icon (approx. 2.5rem)
`.ms-icon--xl`	Extra large icon (approx. 3rem)
`.ms-icon--primary`	Primary color token
`.ms-icon--success`	Success color token (green)
`.ms-icon--danger`	Danger color token (red)
`.ms-icon--muted`	Muted color token (neutral)

Tip: Override color tokens via CSS variables, e.g. --ms-color-primary-600.

Code patterns

Common patterns and accessibility notes.

Inline text with icon: <span class="ms-icon ms-icon--sm" aria-hidden="true">star</span> Text (for font icons)
SVG as decorative: <svg class="ms-icon" aria-hidden="true">...</svg>
SVG as informative: <svg class="ms-icon" role="img" aria-labelledby="id"><title id="id">Label</title>...</svg>