Introduction

HERE icons are distinct and communicate connectivity and data flow. The outline style helps to communicate this flowing nature and the breaks help to create a sense of motion. They are used within product and also used for marketing purposes. Icons can be static or used in motion, but motion should be used where possible.

Guidelines

Overview.

Overview of the HERE icon style. 2 color variation.

Color usage.

Icons are optimized to sit on 4 main background colors: HERE Dark Gray, HERE Gray, White and HERE Dark Aqua. 

HERE Dark Gray backgrounds (or HERE Gray backgrounds). 
Where possible on branded material, use the 2 color version.

HERE Dark Gray backgorunds (or HERE Gray backgrounds).
Use this version where the two color variant is not appropriate.

White backgrounds.
One color (HERE Gray) only.

HERE Aqua backgrounds.
One color (HERE Gray) only.

Dark Aqua backgrounds (print only).
One color white.

Sizes.
Icons are available in sizes large, medium and small.

Large icon size. 
48px/24dp.

The large icons are the master icons and should be used most frequently e.g. website, product, data overlay etc.

Mid icon size.
28px/14dp.

This reduced visibility icon size is mainly used for UI and for cartography.

Small icon size.
12px/6dp.

This icon size is mainly used for transit features and permanent cartography fixtures.

Principles.

When creating icons the following principes should be adhered to.

Animation

Movement
Every movement should feel natural. Objects don't just go from zero to hundred but accelerate and decelerate

Animation curve.

Outgoing Velocity: 50%

Incoming Velocity: 80%

Icon animation.

Icons appear in a continuos motion. The animation curve is applied in the whole animation to create a seamless motion.

Lines
We always start with the line as our first element to animate in.

General line animation.

The lines appear according to the animation curve.

Closed forms.

When the line forms a closed object, it draws in while also moving along its path to create a dynamic motion.

Icon with solid forms.

Solid forms animat in after line elements

Timing
Keep animations short so viewers don't have to wait for elements to appear. The animation should always have a continuos flow ...

Icon animation.

The icons are separated in two parts (see the two-colored version). The animation starts with the wite line accelerating and ends with the aqua line deceleratin.

Resources

Icons files package

We have developed a set of icons with these guidelines. If you need icons for your project, please email icons@here.com with details on what icons you need, how they will be used and any specifications.