Skycons

View on FigmaView on GitHub

Purpose of Skycons

Icons are most effective when they are simple, clear, and representative of their intended meaning, ensuring quick recognition and understanding by users. We use icons at Sky to help guide users while they're navigating through their journey.

Use too many icons and they can become nothing more than decoration, so make sure to always use them with purpose, and where possible include a label to help with accessibility support.

Skycons are designed at 32px with the option to scale down proportionally to 24px and 16px as needed. Skycons should not be scaled up in size, please see the ‘Skycons vs Illustrations’ section for more information.

Categorisation of Skycons

Skycons are split into the following categories -

  • Alerts
  • Audio and Video
  • Common UI
  • Numbers
  • Technology
  • Product Installation
  • Product Descriptions
  • Sales/Purchasing
  • Weather
  • Miscellaneous
  • Social

Each icon comes in two variations, linear and solid. Linear is the default icon style, and should be used unless you need more weight or emphasis in specific contexts, in which case the solid version is a suitable alternative.

Skycons vs Illustrations

Skycons are only supported in three sizes 16px, 24px and 32px. A graphic that is larger than 32px is considered an illustration within Sky UI. These illustrations require a higher level of detail to be effective than the Skycons can offer, so please do not simply scale up a Skycon for this need. If an illustration is required, then a Skycon can be duplicated and detached to be used as a starting point for the design, however it will always need additional details to be effective.

Skycons should be simple, clear and easily recognisable shapes.

Illustrations are larger and have an additional level of detail to bring them alive in the space.

This level of details is too small to be visible at the size of a Skycon.

Using an Icon as a Button

Icons on their own should not be used as a button due to their small size and inability to be easily recognisable as an interactive element. If you want to use an icon as a button please use the Icon Button component or a Button with the icon turned on.

Gradients are not supported

The use of gradients within Skycons is not currently supported. This due to their small size not being large enough to contain the differing contrasts within gradients. Small details can be missed, cognitive load increases and icons that are meant to support users, can instead hinder their experience. Because of these reasons, Skycons only support solid colours from the Sky colour palette.

If you wish to use gradients within an icon consider instead designing a larger illustration instead of an icon. This will allow you to include a higher level of detail and have more space to support the inclusion of gradients. If an illustration is required, then a Skycon can be duplicated and detached to be used as a starting point for the design, however it will always need additional details to be effective.

Solid brand colours make sure the icons are clear and easily recognisable.

Gradients increase cognitive load by having differing contrasts over a very small area.

Alt-text for Icons

Icons should have alt-text, unless they are purely decorative. A decorative icon is one that provides no additional context to the user, and is there entirely to bring visual interest.

Even if your icon is decorative, it still needs to be visually accessible which means it still must only use solid colours and no gradients.

This icon would requite the alt-text of “A secure lock”.

This icon would not require alt-text as it does not provide the user with additional context.

Requesting/Designing a new Icon

You can make a request for a new icon or an edit request to an existing one in the #sky-ui-design-system Slack channel (Sky employees only). It can take up to a month for an icon to be added to the system, depending where the team is within their current sprint. See below for a breakdown of the process.

For an icon to be made a Skycon it needs to be an intuitive design and suitable for use in multiple contexts and/or journeys. If it’s not, then we ask you to use the icon as a stand alone asset in your app.

What to include when you submit an icon to Sky UI -

  • The icon itself, designed to a 32px square following the design guidelines.
  • A name suggestion following the naming guidelines.
  • Any additional tags you think will be relevant to the icon to help others find it.