Usage Guidelines
The easiest way to start using our icons is to include the following code in the <head>
of your page.
<link rel="stylesheet" href="https://modus.trimble.com/assets/0.5.1/fonts/modus-icons.css">
Then use <i class="modus-icon material-icons>icon_name</i>
with the name of the icon inside to insert it into your page.
Design Guide
Grid

Style

Icons
-
3d_buildings<i class="modus-icons">3d_buildings</i>
-
add<i class="modus-icons">add</i>
-
add_new_road<i class="modus-icons">add_new_road</i>
-
arrow_left<i class="modus-icons">arrow_left</i>
-
arrow_left_bold<i class="modus-icons">arrow_left_bold</i>
-
arrow_right<i class="modus-icons">arrow_right</i>
-
arrow_right_bold<i class="modus-icons">arrow_right_bold</i>
-
blank<i class="modus-icons">blank</i>
-
blocks_four<i class="modus-icons">blocks_four</i>
-
blocks_four_outline<i class="modus-icons">blocks_four_outline</i>
-
box_zoom<i class="modus-icons">box_zoom</i>
-
calendar<i class="modus-icons">calendar</i>
-
car<i class="modus-icons">car</i>
-
car_front<i class="modus-icons">car_front</i>
-
change_start_time<i class="modus-icons">change_start_time</i>
-
chat<i class="modus-icons">chat</i>
-
check<i class="modus-icons">check</i>
-
checkbox_checked<i class="modus-icons">checkbox_checked</i>
-
checkbox_unchecked<i class="modus-icons">checkbox_unchecked</i>
-
check_circle<i class="modus-icons">check_circle</i>
-
chevron<i class="modus-icons">chevron</i>
-
chevron_down_thick<i class="modus-icons">chevron_down_thick</i>
-
chevron_left<i class="modus-icons">chevron_left</i>
-
chevron_left_thick<i class="modus-icons">chevron_left_thick</i>
-
chevron_right<i class="modus-icons">chevron_right</i>
-
chevron_right_thick<i class="modus-icons">chevron_right_thick</i>
-
chevron_up_thick<i class="modus-icons">chevron_up_thick</i>
-
circle<i class="modus-icons">circle</i>
-
circle_add<i class="modus-icons">circle_add</i>
-
circle_add_outline<i class="modus-icons">circle_add_outline</i>
-
circle_arrow_up<i class="modus-icons">circle_arrow_up</i>
-
circle_check_outline<i class="modus-icons">circle_check_outline</i>
-
circle_close<i class="modus-icons">circle_close</i>
-
circle_close_outline<i class="modus-icons">circle_close_outline</i>
-
circle_dot<i class="modus-icons">circle_dot</i>
-
circle_dot_outline<i class="modus-icons">circle_dot_outline</i>
-
circle_minus<i class="modus-icons">circle_minus</i>
-
circle_notch<i class="modus-icons">circle_notch</i>
-
circle_outline<i class="modus-icons">circle_outline</i>
-
circle_play<i class="modus-icons">circle_play</i>
-
clipboard<i class="modus-icons">clipboard</i>
-
clock<i class="modus-icons">clock</i>
-
close<i class="modus-icons">close</i>
-
cloud<i class="modus-icons">cloud</i>
-
cloud_download<i class="modus-icons">cloud_download</i>
-
cloud_upload<i class="modus-icons">cloud_upload</i>
-
cluster<i class="modus-icons">cluster</i>
-
company_administration<i class="modus-icons">company_administration</i>
-
compare_arrows<i class="modus-icons">compare_arrows</i>
-
configuration_management<i class="modus-icons">configuration_management</i>
-
crop<i class="modus-icons">crop</i>
-
crow_fly<i class="modus-icons">crow_fly</i>
-
dashboard<i class="modus-icons">dashboard</i>
-
disk<i class="modus-icons">disk</i>
-
dispatch<i class="modus-icons">dispatch</i>
-
driver<i class="modus-icons">driver</i>
-
driver_groups<i class="modus-icons">driver_groups</i>
-
edit<i class="modus-icons">edit</i>
-
edit_line<i class="modus-icons">edit_line</i>
-
edit_road<i class="modus-icons">edit_road</i>
-
envelope<i class="modus-icons">envelope</i>
-
expand<i class="modus-icons">expand</i>
-
expand_less<i class="modus-icons">expand_less</i>
-
expand_more<i class="modus-icons">expand_more</i>
-
export<i class="modus-icons">export</i>
-
external_link<i class="modus-icons">external_link</i>
-
eyedropper<i class="modus-icons">eyedropper</i>
-
facebook<i class="modus-icons">facebook</i>
-
filter<i class="modus-icons">filter</i>
-
finalize_route<i class="modus-icons">finalize_route</i>
-
flag<i class="modus-icons">flag</i>
-
flash_on<i class="modus-icons">flash_on</i>
-
folder<i class="modus-icons">folder</i>
-
frame<i class="modus-icons">frame</i>
-
frame_stop<i class="modus-icons">frame_stop</i>
-
gear<i class="modus-icons">gear</i>
-
gears<i class="modus-icons">gears</i>
-
geocode<i class="modus-icons">geocode</i>
-
globe<i class="modus-icons">globe</i>
-
hand<i class="modus-icons">hand</i>
-
hand_pan<i class="modus-icons">hand_pan</i>
-
heavy_duty<i class="modus-icons">heavy_duty</i>
-
help<i class="modus-icons">help</i>
-
highway<i class="modus-icons">highway</i>
-
info<i class="modus-icons">info</i>
-
inspect<i class="modus-icons">inspect</i>
-
invert_route<i class="modus-icons">invert_route</i>
-
layout<i class="modus-icons">layout</i>
-
light_duty<i class="modus-icons">light_duty</i>
-
link<i class="modus-icons">link</i>
-
list_bulleted<i class="modus-icons">list_bulleted</i>
-
load<i class="modus-icons">load</i>
-
location<i class="modus-icons">location</i>
-
location_arrow<i class="modus-icons">location_arrow</i>
-
location_point<i class="modus-icons">location_point</i>
-
lock<i class="modus-icons">lock</i>
-
lock_open<i class="modus-icons">lock_open</i>
-
manage_places<i class="modus-icons">manage_places</i>
-
manage_route_modifiers<i class="modus-icons">manage_route_modifiers</i>
-
map<i class="modus-icons">map</i>
-
map_layers<i class="modus-icons">map_layers</i>
-
map_marker<i class="modus-icons">map_marker</i>
-
map_markers<i class="modus-icons">map_markers</i>
-
maximize<i class="modus-icons">maximize</i>
-
medium_duty<i class="modus-icons">medium_duty</i>
-
minimize<i class="modus-icons">minimize</i>
-
minus<i class="modus-icons">minus</i>
-
more_horizontal<i class="modus-icons">more_horizontal</i>
-
more_vertical<i class="modus-icons">more_vertical</i>
-
my_trip<i class="modus-icons">my_trip</i>
-
no_entry<i class="modus-icons">no_entry</i>
-
one_way_left<i class="modus-icons">one_way_left</i>
-
one_way_right<i class="modus-icons">one_way_right</i>
-
optimize<i class="modus-icons">optimize</i>
-
orders<i class="modus-icons">orders</i>
-
palette<i class="modus-icons">palette</i>
-
paper_plane<i class="modus-icons">paper_plane</i>
-
pin_icon<i class="modus-icons">pin_icon</i>
-
pin_icon_plus<i class="modus-icons">pin_icon_plus</i>
-
poi<i class="modus-icons">poi</i>
-
polygon<i class="modus-icons">polygon</i>
-
polygon_concave<i class="modus-icons">polygon_concave</i>
-
polygon_cone<i class="modus-icons">polygon_cone</i>
-
polygon_select<i class="modus-icons">polygon_select</i>
-
preview<i class="modus-icons">preview</i>
-
radar<i class="modus-icons">radar</i>
-
random<i class="modus-icons">random</i>
-
refresh<i class="modus-icons">refresh</i>
-
rename_route<i class="modus-icons">rename_route</i>
-
reports<i class="modus-icons">reports</i>
-
reroute<i class="modus-icons">reroute</i>
-
reschedule_route<i class="modus-icons">reschedule_route</i>
-
road_surface<i class="modus-icons">road_surface</i>
-
route<i class="modus-icons">route</i>
-
route_add<i class="modus-icons">route_add</i>
-
route_compliance<i class="modus-icons">route_compliance</i>
-
route_delete<i class="modus-icons">route_delete</i>
-
route_load<i class="modus-icons">route_load</i>
-
route_modifiers<i class="modus-icons">route_modifiers</i>
-
route_off<i class="modus-icons">route_off</i>
-
route_on<i class="modus-icons">route_on</i>
-
route_optimize<i class="modus-icons">route_optimize</i>
-
route_options<i class="modus-icons">route_options</i>
-
route_save<i class="modus-icons">route_save</i>
-
school_bus<i class="modus-icons">school_bus</i>
-
search<i class="modus-icons">search</i>
-
show_closest<i class="modus-icons">show_closest</i>
-
show_truck_info<i class="modus-icons">show_truck_info</i>
-
site_manager<i class="modus-icons">site_manager</i>
-
sort<i class="modus-icons">sort</i>
-
sort_alpha_down<i class="modus-icons">sort_alpha_down</i>
-
sort_alpha_up<i class="modus-icons">sort_alpha_up</i>
-
sort_amount_down<i class="modus-icons">sort_amount_down</i>
-
sort_amount_up<i class="modus-icons">sort_amount_up</i>
-
sort_numeric_down<i class="modus-icons">sort_numeric_down</i>
-
sort_numeric_up<i class="modus-icons">sort_numeric_up</i>
-
speed_coaching_profiles<i class="modus-icons">speed_coaching_profiles</i>
-
spinner<i class="modus-icons">spinner</i>
-
star<i class="modus-icons">star</i>
-
star_outline<i class="modus-icons">star_outline</i>
-
stop_details<i class="modus-icons">stop_details</i>
-
stop_summary<i class="modus-icons">stop_summary</i>
-
stop_time<i class="modus-icons">stop_time</i>
-
suggestion<i class="modus-icons">suggestion</i>
-
swatch<i class="modus-icons">swatch</i>
-
text<i class="modus-icons">text</i>
-
today<i class="modus-icons">today</i>
-
toggle<i class="modus-icons">toggle</i>
-
traffic<i class="modus-icons">traffic</i>
-
train<i class="modus-icons">train</i>
-
trash<i class="modus-icons">trash</i>
-
triangle_left<i class="modus-icons">triangle_left</i>
-
triangle_right<i class="modus-icons">triangle_right</i>
-
trim_fake_orders<i class="modus-icons">trim_fake_orders</i>
-
truck<i class="modus-icons">truck</i>
-
turn_dispatch_mode_on<i class="modus-icons">turn_dispatch_mode_on</i>
-
twitter<i class="modus-icons">twitter</i>
-
two_way<i class="modus-icons">two_way</i>
-
unloaded_order<i class="modus-icons">unloaded_order</i>
-
unloaded_orders<i class="modus-icons">unloaded_orders</i>
-
unload_route_stop<i class="modus-icons">unload_route_stop</i>
-
update<i class="modus-icons">update</i>
-
upgrade_modifiers<i class="modus-icons">upgrade_modifiers</i>
-
user<i class="modus-icons">user</i>
-
user_fields<i class="modus-icons">user_fields</i>
-
vehicle_groups<i class="modus-icons">vehicle_groups</i>
-
visibility<i class="modus-icons">visibility</i>
-
visibility_off<i class="modus-icons">visibility_off</i>
-
volumes<i class="modus-icons">volumes</i>
-
warning<i class="modus-icons">warning</i>
-
weather_alerts<i class="modus-icons">weather_alerts</i>
-
zoom_in<i class="modus-icons">zoom_in</i>
-
zoom_out<i class="modus-icons">zoom_out</i>