New design specifications for MyGeotab Add-In icons

Published on December 29, 2020 in Updates by Vik Sridhar


Size, line, color and configuration guidelines for Add-In developers.

If you are a MyGeotab Add-In creator with Feature Preview enabled, you may have noticed that your menu icon in MyGeotab has been replaced with a circle in our new refreshed user interface. As a follow-up to our What’s new in MyGeotab Version 2004 blog post, where the topic of Add-In icons was mentioned, we'd like to show you how to get started.

Please follow these guidelines for the 2101 release of MyGeotab when creating new Add-In icons for the left main navigation panel. Following these specifications will ensure that your icons comply with other native elements in MyGeotab.

NOTE: The new User Interface (UI) is currently in Feature Preview, but will become standard in our 2102 release, which starts rolling out in Q2 2021. If you would like your new icons to be available in the 2102 release, be sure to make your changes prior to the release.

Icon properties

Navigation icons in MyGeotab are line-style icons. Although some icons include a fill on smaller areas (such as the Map icon), please use the line-style where possible to ensure uniformity with other native elements in the application.

When creating your icon, be sure it conforms to the following:

  • File format: SVG, EPS, AI
  • Color model: sRGB
  • Max file size: 1024 KB
  • Aspect ratio: 24 px square

Size/shape

When creating your icon, it must be square and conform to the dimensions below:

Height = 24 px, Width = 24 px

First add-in icon

Lines

When creating your icon, it must conform to the line properties below:

Stroke / Line weight = 2 px, Corner radius = 2 px

Second add-in icon

NOTE: Be sure to outline any strokes or lines, then merge all vector layers to create a single vector shape.

Colors

There are the two color states for the icons: selected and neutral. The icons below demonstrate how the icons will appear in the main navigation menu in MyGeotab. White-label versions may appear differently.

System Icon colors

Icon when selected = Hex: #0078D3, RGB: 0, 120, 211
Icon when neutral = Hex: #66788C, RGB: 102, 120, 140

Third add-in icons

NOTE: Since the image file type is a vector, you only have to submit one file, in any color. The icon file will be updated to the appropriate colors once received. All original colors will be reset.

Configuration

The Configuration file does not change. The URL for the Add-In icon will remain available in the configuration file.

Configuration file

Icon Display

  • Only SVG icons are supported. If you attempt to load PNG, JPG, WebP or other files, the application will ignore them and the default icon will display instead.
  • SVG icons are downloaded and cached on the client side. If you store icons on your own server, and you experience problems displaying your Add-In icons in MyGeotab, check the Cross-Origin Resource Sharing (CORS) header used by your server. You can either allow the icon to be downloaded from all domains, or from geotab.com. To learn more, visit Cross-Origin Resource Sharing (CORS).
  • When icons are downloaded, they are stored in DOM with the following colors settings: fill = #66788C (or #0078D3 when it’s selected), and stroke = none. If your icon has fill or stroke colors set for some elements they will be reset. Better to draw icons with a single global fill value (on SVG element) and don’t use other colors on separate elements. Colors mentioned are for MyGeotab only, and do not apply to white labels.

More resources

Have questions? Reach out to us through our Geotab Community!

To see our SDK documentation, and to learn more about add-ins, visit our Github page.

Contributor: Monica Nuyens


If you liked this post, let us know!


Disclaimer

Geotab's blog posts are intended to provide information and encourage discussion on topics of interest to the telematics community at large. Geotab is not providing technical, professional or legal advice through these blog posts. While every effort has been made to ensure the information in this blog post is timely and accurate, errors and omissions may occur, and the information presented here may become out-of-date with the passage of time.

Subscribe to Geotab Blog

Sign up for monthly news and tips from our award-winning fleet management blog. You can unsubscribe at any time.