New design specifications for MyGeotab Add-In icons
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.
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
When creating your icon, it must be square and conform to the dimensions below:
Height = 24 px, Width = 24 px
When creating your icon, it must conform to the line properties below:
Stroke / Line weight = 2 px, Corner radius = 2 px
✱ NOTE: Be sure to outline any strokes or lines, then merge all vector layers to create a single vector shape.
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
✱ 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.
The Configuration file does not change. The URL for the Add-In icon will remain available in the configuration file.
- 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.
If you liked this post, let us know!
Vik Sridhar, Senior Product Manager for MyGeotab, is responsible for the product roadmap and bringing to life new developments.
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.
Other posts you might like
What is g-force and how is it related to harsh driving?
Learn what g-force is and how it is used to monitor risky driving behaviors.
November 5, 2020
Introducing the MyGeotab API Adapter
Learn more about the structure of the MyGeotab API Adapter solution and the types of data it can retrieve.
October 30, 2020