Sky icon library

One

01. Background

As part of a wider design task to reform the Sky Design System, we highlighted several problems with the existing Sky icon library. There were no creation guidelines and each icon had been created using zero grids, causing inconsistencies throughout.

Two

02. Objective

First I wanted to set-up a set of creation guidelines so that icons are kept consistent throughout. Then I wanted to re-create all existing icons in the Sky icon library to align them with the set of creation guidelines.

Three

03. Success criteria

Having a set of creation guidelines will mean that any designer – junior or experienced – will be able to create new icons to add to the Sky icon library. In turn, this will save time, increase the repository icon number and make sure icons are consistent for users throughout their Sky journey

System icons

System icons are designed to be simple and modern. Each icon is reduced to its minimal form, expressing essential characteristics for greater clarity and legibility. Icon shapes are bold and geometric. They have a symmetrical and consistent look, ensuring readability and clarity, even at small sizes.

Keyline grid

A keyline grid is a set of guides to help maintain optical balance (visual weight) between icons. It should be used as a starting point and for guidance. There are four basic shapes that represent common icon scale and placement.

Pixel perfect

To avoid distorting an icon, they should be positioned “on pixel” by making the X and Y coordinates into integers, without decimals.

Linear

Solid

Ready to take the next step and work together?

Sky sign-in page

View Project