GitHub
Iconography
Icons are symbols used to visually represent objects, actions and ideas. They are interactive, and communicate information in spaces where a text component doesn’t fit. Icons must showcase our contemporary aesthetic and present the Shell brand by being respectful to its legacy.
Downloads
Shell icons are available in SVG for use across our digital products on the web, Android or iOS. Download our icon template from Figma to start your design projects.
Designing icons
Sizes
Shell icons are drawn on a pixel grid of 24 x 24px. Use the grid as a guide to ensure pixel-perfect accuracy. Design icons at 100% size to ensure correct scaling.
Live area
Icon is set to a 20 x 20 pixel live area, with 2px padding around the edge.
Padding
2px of clear space creates the padding which surrounds the 20 x 20px live area.
Keyline shapes
Keylines provide a consistent size for basic shapes and proportions across the set of icons. They enable a visually stable foundation, and complement the proportions of the objects and icons they represent.
Square
Height: 18px
Width: 18px
Circle
Diameter: 20px
Rectangle vertical
Height: 20px
Width: 16px
Rectangle horizontal
Height: 16px
Width: 20px
Colour
Icons are always a solid, monochromatic colour and need to pass the same colour contrast ratio as typography (4.5:1).
Clarity
Position icons on pixels by making X and Y coordinates into integers to avoid distorting icons. This also avoids sub-pixel interpolation issues when the icon is rendered.
Do ensure that paths are situated on whole pixels or aligned to the nearest pixel.
Don’t position paths in the centre of pixels as this will cause the path to render poorly.
Strokes
Ensure the visual weight of a 2px stroke is maintained so that icons look consistent. If icons are complex or have a excessive line density then 1.5px strokes can be used.
Use 2px strokes where possible.
1.5px strokes are acceptable in cases where a 2px stroke would make the icon too complex.
Stroke terminals
For stroke terminals we use a 0.5px radius.
Do use a 0.5px radius on stroke terminals.
Don’t use completely square terminals on strokes.
Icon complexity
When designing icons, ensure they are not overloaded with detail, and avoid unnecessary elements which detract from the clean Shell style.
Do ensure that icons are facing forward.
Don’t tilt, rotate, or make icons appear dimensional.
Do simplify icons for clarity and legibility.
Don’t be overly literal with complex icons.
Corner radius
An icon’s corner radius consists of curved exterior corners. The recommended corner radius values are between 0.5px and 4px.
Contributions
You can contribute to SDS by posting your icon requests to the SDS Community Icons Figma file below. Before creating a submission, please check the SDS icons library to ensure that there aren’t existing icons which would suit your needs. We’re aiming to release quarterly updates to SDS icons.
Is this page useful for you?
Your feedback helps to improve our documentation.