Our approved suite of icons
Relevance and consistency
Icons must be relevant to the information you're communicating. They must also be used consistently to illustrate a theme.
For example, the finance icon must always be used to represent and enhance finance messaging.
Our icon style
Our icons share many different visual qualities that together help us build a distinct look.
Our icons are created using as few elements as possible, in a geometricstyle using a constant and fixed stroke thickness, sharp right angled corners and no filled-in blocks.The following guidance should be adhered to when professional designers are creating icons on our behalf.
All of our icons are created using our geometric grid structure set at 0°, 90° and 180° angles and can employ 45° increments where necessary.
Where possible, we should endeavour to predominantly create our icons using geometric shapes (squares, rectangles, triangles and circles).
Corners and stroke ends
All of our icons should have square corners and straight stroke ends. In some cases, rounded corners will need to be used for certain icons to be made.
We create all of our icons in two sizes, those designed for use online and those intended for print applications.
Large icons should be used for any application 11mm / 49px and above.
Small icons should be used in any application below 10mm / 48px and below.
Each icon size has differing levels of detail suited to their intended use and optimum legibility.
We use negative space to give our icons depth and weight. We can use it to distinguish between elements in an icon and allude to foreground or background positioning.
All of our icons use a constant stroke thickness. For our large icons format this is set at 2.5mm, on our small icon format this is 4px.
Creating new icons
When creating any new icons it’s important to take the time to ensure both sizes are created as detailed below.
All new icons must be approved by Corporate Marketing.
All final artwork for icons, once approved must be sent to Corporate Marketing.
Creating our icons
Only External Relations or an approved agency should create icons.
To ensure all of our icons follow and share a consistent style, we have two fixed icon artboards to help in their creation. Our artboards are set up so that the scale, size and positioning of any icon is consitent.
Our large icons are created using a master editing artboard of 100mm x100mm, with a safe area of 80mm. The artboard is divided by 98 gridlines set at 1.25mm intervals.
All of our large icons are created at a stroke thickness of 2.5mm.
Our large icons are intended for use primarily on print applications, between 11mm up to and above their native 100mm size. These icons are not suitable for use below 10mm, at which point our small icon size should be used.
Our small icons are created using a master editing artboard of 48px x 48px.The artboard is divided by 46 gridlines set at 1px intervals.
All of our small icons are created using a stroke thickness of 4px (which scales to 2px when displayed at 24px online).
Our small icons are intended for use at either 48px or 24px when used online to ensure correct pixel representation. Our smaller icons are also suitable for use in print, at sizes below 11mm. Because all of our icons are vector based, it’s irrelevant that they are created at a pixel scale when using in print.
The level of detail should be led by the scale at which the icons are used.
The most important thing is that the icons are clear and simple to understand.
When selecting colours for our icons it’s important to follow our approved colour combinations. Please note that these differ for print and online use to ensure AA standards online. AA is always required, but we aim for AAA.
Icons can be used in white only, on the secondary colour palette. Icons can not be used in any secondary colour, so that they remain consistent.
When using icons in print, please use your judgement to ensure icons are legible.
More about online accessibility.
The accessibility guidance for print is currently being reviewed. More guidance will be available soon.
Using icons online (CTAs)
When using our icons online, specific guidance ensures that we are able to retain a consistent look and feel. As standard, a simple right arrow is used on all call to actions (CTAs). There are some exceptions which are considered on an individual basis.
Where icons are used for call to actions, padding should be as follows:
- Top and bottom – 10px
- Right – 60px
- Left – 8px
Please do not change padding outside of these values unless your site is bespoke. Editors have worked very hard to align content and imagery with CTAs/columns so adjusting the padding will affect this.
The most commonly used icon size across our web pages is 18px. This size is determined in the style sheet. Icons can be used up to a maximum of 48px, but please use your judgement when using icons on web pages, and ensure they do not look oversized for the page.
For times when a larger CTA icon is needed (above 49px), the large version of the icon should be used.
CTA icons should be added as a background image and be positioned at 50% vertically and 10px from the right.
For large CTAs, they should be positioned 50% horizontally and 10px from the bottom.
Always align CTA icons to the right. For larger icons, center-bottom.
See above for online colour guidance.
All CTAs must have a 2px transparent border. The background colour should be #007ca7 as standard and they should use a white icon.
Where possible, our icons should have a different hover state. On hover, apply these attributes:
- border colour #18194f
- background colour transparent
- background image must use the same style icon in the same colour as your border
All icons should be created using the master grid, do not change the stroke thickness.
Find out how to apply styled CTAs to your links
Using icons online (non-CTAs)
Use icons from our approved suite to add visual appeal to your web pages. As standard, they use Blue Two from the colour palette and are 500x500px.
To place an icon on webpage you will need to select the icon on the CMS. All of the icons are saved within the iconography folder under shared resources on the CMS. The icons can be dragged onto CMS webpages.
- drop an icon into your page (ideally in columns no wider than 50% of the width of your page).
- click on the icon and apply the class img-responsive from the styles drop down. This will snap the width of the icon to the width of your column.
Using icons in print
When using our icons in print, specific guidance ensures that we are able to retain a consistent look and feel.
To highlight text or information
Our icons can be used as pictograms to help illustrate statements or facts within a piece of communication. You can scale pictogram icons according to your design, as long as you don’t use a large icon below 11mm in size or a small icon above 10mm.
Icons must be consistent and relevant to the information that they support.
Icons can have multiple meanings. For example the ‘people’ icon could represent people, teamwork, role and responsibilities.
As call to actions
When using icons to highlight CTAs, ensure you use the small versions. Small icons should never be used larger than 10mm.
When creating, redrawing and saving our icons its important to be consistent and organised.
Naming and folder structure
It is important to keep our icons organised. Please follow the naming and folder structure below:
Files should be saved as either eps, svg and jpg (for large icons) and eps, svg and png (for small icons). ico. files can be provided if needed.
Creating new icons / editing stock icons
When creating new icons or redrawing stock icons, please follow the size, grid and style guides as detailed above.
The illustration below shows some dos and donts when adapting existing icons to fit our style.
New icons should only be created by internal design or one of our design agencies.
We're developing an extensive suite of icons which will cover a range of themes. To request these icons please click on the 'request an icon' button to the right.
All new icons must be approved by Corporate Marketing.