Skip to main content Jisc logo

User experience and design

  • About
  • Key considerations
  • Get started
  • Foundations
  • Guidance
    • Principles
    • Building your layout
    • Design patterns
    • Jisc style
    • User interaction
    • Technical considerations
    • Making resources accessible
  • Resources
  • Assets
  • User experience and design
  • Guidance
  • Jisc style
  • Icons

Icons

Our icon library and core icons

Contents

  • Principles
  • What to use icons for
  • Consistency

Principles

  • Use sparingly
  • Be consistent
  • Give context

What to use icons for

Icons can be used to symbolise a command, file, device, directory or to represent common actions like delete, print, or save. If used, an icon’s meaning should generally be reinforced by a label or accompanying text. Icons should be used sparingly and as an aid to users, not as a decorative flourish.

Consistency

Though we think of icons being fast to recognise, typically they require learning. Consistency aids user comprehension. Icons must be used consistently within a single user interface and across other Jisc applications and services.

Font awesome

We recommend the use of Font awesome because of its clean and simple style. Its icons render cleanly and crisply at a variety of sizes across all devices and screen resolutions. It has a broad range of icons that should cover most use cases.

Core icons

To ensure consistency across our web estate we have defined certain icons that are used in common interactions as ‘core’.

  • Actions
    • Close
    • Show hide
    • Next , previous , first , last
    • Sort , ascending , descending , filter
    • Download
    • Save
  • File (for download)
    • Generic document
    • Text
    • Presentation
    • Audio
  • Media
    • Play
    • Pause
  • Sections
    • Settings
    • Help
  • Page elements
    • Information
      (extra detail not help info – eg image ownership)
  • Social
    • Twitter
    • Youtube
    • Facebook
    • LinkedIn
    • Instagram
    • Flickr
  • Creative Commons
    • Jisc style – contact user.experience@jisc.ac.uk
Intentionally excluded

Notifications – Generic notification should be a number in a box next to the item on screen that requires attention.

Using another icon set

If you need to use an alternative icon set, any icons defined as ‘core’ must match the visual appearance of the appropriate font awesome icon as closely as possible.

Example: Settings
Example similar settings icon from an alternative set

Example similar settings icon from an alternative set

Icons in use

  • Jisc R&D project pages
  • Jisc contact page

Further reading

  • Icon usability
  • Making your icons accessible
  • UXMyths – icons enhance usability

 

Useful links
  • Cookies
  • Privacy and your data
Contact
  • user.experience@jisc.ac.uk
Archive
  • Looking for the old pattern library?
Jisc logo

We’re a membership organisation, providing digital solutions for UK education and research

jisc.ac.uk

Areas
  • Connectivity
  • Cyber security
  • Cloud
  • Data and analytics
  • Libraries and research
  • Student experience
  • Advice and guidance
Explore
  • Guides
  • Training
  • Consultancy
  • Events
  • R&D