Menu
Iconography
Brand Icons
Icon principles
Our icons are simple and informative. Each icon builds on the visual language of the design system and brand icons are rarely used in product experiences since they are for marketing purposes.
Simple and calm over fussy and detailed
Overly detailed icons increase cognitive load. Focus on simplicity to help customers understand the concept the icon represents and allow for easy recognition at smaller screen sizes.
Do keep it simple
Monthly
Don’t be fussy
Monthly
Complete clarity over confusing and abstract
Icons and symbols are easier to understand when they represent their most basic idea or concept. Don’t be metaphorical or abstract with an icon it will cause confusion for the user.
Do be clear
Our customers
Don’t be abstract
Our customers
Icon guidelines
As a general rule, brand icons add visual balance to the layout of marketing focused pages. They help with wayfinding and sentiment.
Whenever possible, they should be used to help users make quicker decisions when they’re presented with options and be sure to use a label or supporting text, so its meaning is understood.
Limit icon variations
Where possible use variations of the same concept. For example, Home Insurance and Mortgages should be a variant of a house. Don’t create a custom icon for each concept—it bloats the icon library and makes it difficult for users to create strong connections around a concept.
Do be consistent
Home Insurance
Mortgages
Don’t reinvent
Mortgages
Pair icons with text
The purpose of an icon is to give a visual cue to the content. In general, icons should be placed near a label or title. Never use an icon to replace a name of a product or feature.
Do pair icons with text
Financial goals
Don’t go it alone
Defining sentiment
Brand Icons can help define a sentiment or tone of voice by being aspirational and fun without the need of being too literal. This helps spark emotion and engagement for the user.
Do be consistent
Hit your target
Don’t be too literal
Hit your target
Scale
We have three sizes
All our icons adhere to the 8pt grid system. We have three icon sizes, 56px, 40px and 24px. Icons should always work to the full artboard and be aligned to the grid. Visual consistency is key.
Large icon
- 56px x 56px artboard
- Work to full artboard size
- Align to grid
Usage
- Landing page components
- Design System components
Medium icon
- 40px x 40px artboard
- Work to full artboard size
- Align to grid
Usage
- Landing page components
- Digital / CRM / Display
Small icon
- 24px x 24px artboard
- Work to full artboard size
- Align to grid
Usage
- Default size for app
- Landing page components on desktop / mobile
- Utility icons also available at 24px x 24px in UI Sketch library
Colour
Our brand icons use the primary colours of pink and purple. When a pink and a purple layer overlap, a 100% multiply is applied to the layer transparency of the purple object creating a darker colour. Please note it is not an essential requirement to have the multiply layer in each icon.
Using icons on an emotional background
Brand icons should be used within the brand mark/shape when used on a backround colour. This is so we don’t loose our brand personalty from the visual assets by creating white out versions.