• Print
   
   

Icons

Icons can help simplify communications, standing in for complex or detailed content, so it is important that our icons share the same look and feel as the rest of our identity and support and enhance our messaging.

We have created specific guidelines to use and create new icons, and a suite of icons for use across our communications.

icon-Calendar
icon-Travel
icon-Research
 
 

More information

Our approved suite of icons

Below is our approved suite of icons. The icons can be downloaded and are ready to use on the University website. See guidance below

To request a different icon or for any iconography queries contact Contact Marketing

Icon Name Use this icon for
Accommodation accommodation house Housing living
Ariel View Bird's eye view Have a look view review
Arrow (up) Direction Upload
Award awards Medal achievement reward
Building building museum site visit Field trip
Calendar calendar date event Schedule timetable
Camera photo CAMERA Photo competition
Catering eating restaurants food catering hospitality Meals
Chaplaincy Chapliancy Religion Faith prayer helping others Counselling
Childcare children nursery childcare
Cogs foundations functional process cogs settings
Collaboration collaboration Volunteering helping others training consultancy
Computer IT services Computer Repairs technology work spaces
Debate blogs debate Discussion Early learning council
DirectMail Direct mail mail shot
DRSV david ross sports village Sport Events happening at DRSV
E-Learning digital teaching work spaces facilities e-learning
Email email
Finance finance loans grant funding Banking money
GreenSpace green spaces grounds campus Eco-friendly Outdoors
Health health wellbeing doctor lifestyle
icon-search-White
Industry Industry buildings city Careers
Information more information find out more
Information Point Information point IT Hubs
Jigsaw core networking connected jigsaw collaboration
Libraries Libraries books study Study spaces Reading
Libraries Tech Libraries technology e-learning
Location location find us directions
Music music hobbies Listen
Pencil edit update Pencil activity
Research Research analytics data
Search search find us
Signpost directions Signage career paths
Speech Bubble debate Discussion speech bubble elections
Sports Ball Sports ball football
Study study measure analytics data
Sustainability Eco-friendly Sustainability Green World peace
Team Sports Team Sports Business meeting
Telephone telephone Contact us call us
Travel Travel buses directions getting here
Video video Watch
World world global planet Impact
 

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.

Style
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.

Angles
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.

Shapes
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.

Two sizes
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.

Negative space
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.

Stroke thickness
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.

 

Our icon style image

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.

Large icons

Artboard
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.

Stroke thickness
All of our large icons are created at a stroke thickness of 2.5mm.

Sizing
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.

Small icons

Artboard
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.

Stroke thickness
All of our small icons are created using a stroke thickness of 4px (which scales to 2px when displayed at 24px online).

Sizing
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.

Creating our icons

The most important thing is that the icons are clear and simple to understand.
 

Colouring our icons

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.

Colouring icons print

Colouring icons digital

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.

Padding
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.

Icon size
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.

Alignment

Always align CTA icons to the right. For larger icons, center-bottom.

Colour

See above for online colour guidance.

Normal state

All CTAs must have a 2px transparent border. The background colour should be #007ca7 as standard and they should use a white icon.

Hover state
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

Stroke
All icons should be created using the master grid, do not change the stroke thickness.

Icons online

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. 

/SharedResources/Images/Iconography

  1. drop an icon into your page (ideally in columns no wider than 50% of the width of your page).
  2. 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.

Icons in print

 

Further details/notes

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:

name_size_colour_mode.filetype

for example:

studies_large_blue5_cmyk.eps

Formats
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.

Further details

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.

 

 

 
 
 

External Relations

University of Nottingham
C Floor, Pope Building (Rooms C2-C10)
University Park
Nottingham, NG7 2RD

telephone: +44 (0) 115 951 5151
contact us: Make a enquiry