Iconography

Icon style

Our icons always sit in a yellow circle to allow for easy navigation and clear signposting.

Examples of icon construction and what to avoid. Icon is 260pixels with an arrow that has a line weight of 22pixels and clear space of 27 pixels. Go to page content for what to avoid.

Our icon style complements our typeface, bold and friendly with simple linework.

The linework has a consistently bold feel to it, and the specific weight is 22pixels.

Do not use:

linework that's too thin
inconsistent linework weights
less clear space than 27 pixels
rounded corners. They should always be sharp.

Functional icons

Our functional icons provide a strong visual call to action and are a distinctive element of our brand system. They can be used in both digital and print environments.

Examples of our icons. Direction icon is a diagonal arrow pointing downwards, download icon has an arrow pointing down at a line, shop icon is a large star outline with 2 smaller block stars, web link icon is a mouse arrow, email us icon is an envalope, read more icon is a book, call us icon is a phone with sound waves, audio description icon is a speaker with sound waves.

Examples of functional icons include:

direction
download
shop
web link
email us
read more
call us
audio description

Icons in use

Our functional icons are flexible in the way they are used. We can use them at small scale, locked up to a lozenge, like a web button.

For example, we might have:

the 'download' icon sitting next to a download button.
the phone 'call us' icon next to a call us button.
the arrow 'direction' icon next to a button with our website URL

Creative use

We can also use them more creatively. The icon becomes the main graphic element.

3 examples of icons breaking out of the circle. The first has an envelope with movement lines that overlay both inside and outside the circle. The second has a phone inside the circle with the soundwaves expanding out from it and ending outside the circle. The last one is a mouse arrow and the end of the tail sits outside the circle.

In these icons, illustrations 'break out' of the circle.

When scaling icons up or down, please make sure the stroke weight is set to also scale up or down.

Note: Only use one 'creative use icon' at any one time, for clarity of message

Creative use examples

Here are some examples of function icons used 'creatively'.

Icon examples on mobile and leaflets. Shows creative use of icons, like having the email icon as the central image to signify contacting us. Some of the illustrations 'break out' of the circle.

We can use our icons as the focal point, like having the email icon as a large central image to represent emailing our helpline. Or a large arrow pointing at our website URL with different calls to action.

For example, having the text 'Change. Let's make it happen'. Then the direction icon pointing to our membership sign up page.

4 examples of the icon in use in different ways. The first has medium sized text 'Change. Let's make it happen' in the middle of the page with a small direction icon to scope website in a lozenge. The second has large text, covering most of the page, a large direction icon pointing a smaller lozenge with thi website. The third has medium sized text, a very large direction icon at the centre as the focal point, then website lozenge overlaying the icon at the point of the arrow. The last has very large text, and a small direction icon side by side with the website lozenge.

Expressive iconography

Expressive iconography uses exactly the same style as 'creative use' functional iconography. The linework can 'break out' of the yellow circle.

4 examples of expressive icons. 2 sit inside the circle and are a smiley face and a flower made of lines. 2 break out of the circle, one is a bullseye with the arrow coming out of the circle, the other is pin symbol coming out of the centre of the circle.

Expressive iconography is used to communicate messaging in a fun and vibrant way. It's not used to show a specific call to action.

For example, we might have 'Hit your targets, fundraising guide' with a break out bullseye icon.

2 examples. 1 shows 'hit your targets' with bullseye icon at the centre. 2 shows 4 pamphlets with different large expressive icons at the centre.

We could also have 'Change. Let's make it happen' with a group of our faces icons.

4 examples of A4 portrait pages. 2 examples have a Bright Pink or Purple background with 3 large face icons using Pastel Green, Pink and Yellow. The text is small and sits below the icons. 2 examples have large text with White and Bright Yellow backgrounds. The face icons are small and sit below the text to the right.

Request our brand assets

To request Scope brand assets, please complete the assets request form.

Return to the brand guidelines page