Icons & Pictograms
Icons, combined with annotations, help customers navigate through content effectively, and should not be used to illustrate or decorate. In our B2C brand, icons are primarily used in digital. They are functional and simple, existing to provide clarity. They work really well for wayfinding, both online and in physical spaces and have been designed to work perfectly at small sizes. Designed to tie in with our pictogram style, we use a continous line and rounded corners.
Our icons are divided into three levels, UI icons, functional pictograms and illustrative pictograms.
UI icons
Interface icons represent ideas, objects or actions. They can communicate messages at a glance, afford interactivity, and draw attention to important information. When used wisely, icons become an elegant yet efficient way to communicate with and help guide a user through an experience.
All UI icons should have a consistent stroke weight with other UI icons of the same size. UI icons should be drawn on the 32px base grid using a 2px stroke and then scaled down proportionally to produce the other sizes.
UI icons come in four sizes. These sizes pair well with each of the available content font sizes and should be used appropriately.
Color
UI icons should be shown in a solid, monochromatic colour and should match the colour of their accompanying text label. They should remain AA accessible in the same way as typography, with a contrast ratio of at least 4.5:1.
Grid & anchor point
Padding
Key shapes
Icons in use
Here are some examples of the icons in use.
Functional pictograms
Like our user interface icons, our functional pictograms also represent ideas and objects, but are for use in larger spaces. They can be used to help support written content and engage the viewer, as they allow for more detail and expression. They have similarities to Interface icons in how they are constructed, but they also contain many different and distinguishable visual features.
Containers
Functional pictograms can be displayed in circular containers to give them more visual weight or help separate them from text content in some situations. The size of the container is calculated based on the pictogram padding size.
Sizing
Grid & construction
Padding & solid fills
Consistency
Illustrative pictograms
Illustrations are a key tool that helps drive customer engagement which fosters an emotional connection with our users. Use illustrative pictograms when in need of a more general, more illustrative icon. Supporting text should always be visble, enabling the pictograms to be more abstract than prior levels. They give Telenor more warmth and personality.
Download
Sizing
Illustrative pictograms should be used when there is more room available or if the subject is more complex. The minimum size is 120px, while the maximum size is 320px. For applications that require a larger visual, use illustration or photography. The lines should mimic it’s original stroke size when scaling.
Base grid
Stroke
Anchor points
Fluid loops
Gaps
Rounded corners
Rounded terminals
Fill and outline
Motifs and complexity
Motifs
Illustrative pictograms should have a more freely use of abstract subjects and motifs than fuctional icons. They should have a visual relationship with level 2, but they can be more complex and more abstract or emotional.
Pictograms should be not be drawn in perspective. They should always be supported by text and should never be the only communication.
Complexity
Each illustrative pictogram should have a consistent level of detail and complexity. If the motive you wish to convey is a simple phone, try adding more information or detail. If that’s not possible -use the icons in the level below.
The pictograms should not be too complex. Don’t draw whole humans, focus for example on heads or hands combined with other storytelling objects.
