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

The standard icon size for the DRTrack icon set is 16px. The icons are built upon a base grid structure that includes guidelines for sizing of different shaped icons. These scale guidelines ensure each icon has the same visual weight so they all feel the same size, regardless of their overall shapes.


Style

This icon set is built with a balanced combination of crisp geometric shapes, and subtle rounded corners to soften the edges and make them feel humanistic. When possible, 1px gap is added to define shapes or add details.





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>
  • menu
    <i class="modus-icons">menu</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>
  • radio_button_checked
    <i class="modus-icons">radio_button_checked</i>
  • radio_button_unchecked
    <i class="modus-icons">radio_button_unchecked</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>
  • share
    <i class="modus-icons">share</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>
Last updated April 14, 2022.
On this page