Introduction
HERE icons are drawn in a distinct outline style that expresses the dynamism of our brand and communicates the connectivity of our offerings. We use them within our product UI, as well as in certain marketing assets. Check our brand icons library
For users/employees
When to use
Icons can be understood as a single word or thought made visual, like a visual definition. Use an icon to strengthen the point that you’re making and to help others intuitively grasp content. Most use cases are in presentation slides, in marketing materials like one pagers or eBooks, or on our homepage.
Icons rarely 100% match with the point you want to make, so please first try to find alternatives that can make the same point instead of requesting a new icon right away. For example: You could use the Microphone icon to represent Podcasts, the Smart Watch showing a heart rate for exercise, the Library icon to represent records and files, or the Lab icon test tube to represent vaccines. Readers will understand what you mean in context!
File format
HERE icons come in two formats: PNG and SVG.
An SVG is a vector format, which means it’s light and scalable. It can be enlarged to whatever size the user needs and it will always stay sharp. It’s compatible with the same applications as PNGs but has the advantage of being editable and can also be animated.
A PNG is a super light and rasterized file that is made up of pixels, therefore it will appear blurry when scaled up. PNG files can be used in PPT presentations, web browsers and design software.
In some instances PNGs are required, but to be on the safe side, always use an SVG if possible.
Scale
If you want to scale an icon, please use the SVG format. By scaling the PNG format, you will pixelate the icon and it will appear blurry!
Color
Like the HERE logo, icons can be used in several different color versions to flexibly adapt to different contexts. There are four versions available for download, which account for the most frequently encountered cases:
Primary gray icon
This is the main version of our icons, and is used on light backgrounds. If possible, always use this version.
Colors used:
- Shape – HERE Dark Gray (#0F1621)
- Accent – HERE Dark Aqua (#00AFAA)
Primary white icon
This negative of the main icon version should be used on dark backgrounds.
Colors used:
- Shape – White (#FFFFFF)
- Accent – HERE Aqua (#48dad0)
Secondary gray icon
This monochromatic gray icon version should be used on light backgrounds.
Colors used:
- HERE Dark Gray (#0F1621)
Secondary white icon
This monochromatic white icon version should be used on dark backgrounds.
Colors used:
- Shape – White (#FFFFFF)
For designers
Design approach
Our icons are constructed from a data line, giving them a lightweight and dynamic look. They can be either static or in motion to further emphasize the fluidity of our icon style. Gaps between shapes, color accents, the characteristic linearity and other elements combine for a fully differentiated and exclusive HERE Technologies visual asset.
Scale
Use the stroke weights pre-set for the standard sizes:
- 1px stroke for 48x48px
- 2px stroke for 72x72px
- 2px stroke for 96x96px
For anything bigger, scale the stroke proportionally.
Icon tool
In our design team we use Nucleo, an icon tool which helps us create icons and easily generate versions in different sizes and formats with a few clicks. This is also our repository for icons that we continuously update. Therefore, please do not work from old icon files saved to your desktop or create icons yourself. If absolutely no existing icon fits your needs, please order a new icon here or check our brand icons library.