Icons

Our icon library and core icons

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

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

Further reading