Design Guidelines

Anatomy

Skycons use strict guidelines for creation to ensure consistency and coherence across all of Sky, maintaining a uniform visual language. Please use the template provided if you are designing a new icon for your project or the system. If you need help, please ask the Sky UI team.

Please note: Some of the icons on this page have been scaled up for illustrative purposes only.

Linear and Solid Variations

All Skycons must have linear and solid variants in order to be able to have flexible use within the system. Solid versions should not be an inverted version of linear within a shape. If you need support in creating a solid version please ask the Sky UI team.

Skycon Design Guidelines

Layout

Icons use a 32×32 pixel base grid with 28px live area and 2px reserved for padding and optical sizing.

Keyline Grid

A keyline grid is a set of guides to help maintain optical balance (visual weight) between icons. Use it as a starting point and guide, but not a hard rule. There are four basic shapes that represent common icon scale and placement.

Stroke and layout

Icons use a consistent, centred stroke width of 2px. It is also recommended that there is a minimum gap of 2px between strokes.

End caps

We use a simplified 1px ‘Sky Curve’ on our Skycons to keep them quintessentially Sky. For double ended lines we try to alternate the direction of the curved cap unless there is a clear direction of focus. The curved corner is set to a radius of 1px.

Corner Radius

Inside corner radius should be kept at zero, this is to avoid added complexity inside of the shapes. The recommended and default corner radius is 1px to create consistency across icons.

Clarity (pixel perfection)

To keep consistency and clarity, all icons should be aligned to pixel grid. If it's not possible to stick to the pixel grid, a 0.5px leniency is allowed.

Shapes

All shapes need to be simple and easily recognisable. Avoid unnecessary complexity by adding shadows or minute details that will be lost with scaling.