Google Material Design Navigation Icons

Here we will learn navigation icons in google material design with examples and different type of navigation icons (apps, arrows upward, chevron left / right, close, cancel, refresh, menu, arrow back, etc.) in google material design with examples.

Google Material Design Navigation Icons

Google material design is having different type of navigation icons available those are full screen full screen exit, menu, last page, first page, refresh, subdirectory arrow left / right, etc.


Following table shows the list of available navigation icons in google material design.


NameUsage DescriptionIconExample
apps <i class="material-icons">apps</i> apps DEMO
arrow back <i class="material-icons">arrow_back</i> arrow_back DEMO
arrow downward <i class="material-icons">arrow_downward</i> arrow_downward DEMO
arrow drop down <i class="material-icons">arrow_drop_down</i> arrow_drop_down DEMO
arrow drop down circle <i class="material-icons">arrow_drop_down_circle</i> arrow_drop_down_circle DEMO
arrow drop up <i class="material-icons">arrow_drop_up</i> arrow_drop_up DEMO
arrow forward <i class="material-icons">arrow_forward</i> arrow_forward DEMO
arrow upward <i class="material-icons">arrow_upward</i> arrow_upward DEMO
cancel <i class="material-icons">cancel</i> cancel DEMO
check <i class="material-icons">check</i> check DEMO
chevron left <i class="material-icons">chevron_left</i> chevron_left DEMO
chevron right <i class="material-icons">chevron_right</i> chevron_right DEMO
close <i class="material-icons">close</i> close DEMO
expand less <i class="material-icons">expand_less</i> expand_less DEMO
expand more <i class="material-icons">expand_more</i> expand_more DEMO
first page <i class="material-icons">first_page</i> first_page DEMO
fullscreen <i class="material-icons">fullscreen</i> fullscreen DEMO
fullscreen exit <i class="material-icons">fullscreen_exit</i> fullscreen_exit DEMO
last page <i class="material-icons">last_page</i> last_page DEMO
menu <i class="material-icons">menu</i> menu DEMO
more horiz <i class="material-icons">more_horiz</i> more_horiz DEMO
more vert <i class="material-icons">more_vert</i> more_vert DEMO
refresh <i class="material-icons">refresh</i> refresh DEMO
subdirectory arrow left <i class="material-icons">subdirectory_arrow_left</i> subdirectory_arrow_left DEMO
subdirectory arrow right <i class="material-icons">subdirectory_arrow_right</i> subdirectory_arrow_right DEMO

Topics Covered