Iconography

Our linear icons are divided into three categories:
Product, functional, and playful.

Our icons are influenced by the structure of the secure portal graphic device. Similarly to the portal, each icon should be built using the 20° angle.

Every icon features the wavy line element derived from the portal graphic device. The size and frequency of the waves should remain the same across all of the icons.

In order to ensure consistency all of our linear icons are created on a 48px grid. Our icons are constructed using a 1px stroke width.

All strokes in icons should have a rounded cap and all corners should be square.

When using icons on our website, the maximum size for the icon container is 48x48px. Each icon must be exported with the same padding to ensure consistent sizing for every application.

We have a varied library of pictograms that have been created to best match the needs of our brand.

Our pictograms are derived from our linear icons, maintaining the 20° angle from the portal. They have more intricate details and portray depth and movement.

Our pictograms should only exist on solid white or light grey backgrounds in order to ensure contrast and visibility. They should never exist on any other colours or gradients.

When using pictograms on our website, the maximum size for the icon container is 256x256px. Each pictogram must be exported with the same padding to ensure consistent sizing for every application.

1. In simple instances smaller than 48x48px on our app and website.

2. As an access point for our customers to better understand our product.

3. To highlight how our product works and connect with specific audiences.

1. In instances that are larger than 48x48px that require
more detailed demonstration of how our product works.

2. In supporting or secondary modules, not hero content

3. Whenever the user needs step by-step guidance