Description
Spot icons act as a bridge between our character illustrations and our detailed icons, offering more visual impact while still supporting content in a literal way that's easy for users to scan.
Types
We offer 2 types of spot icon:
Standard spot icons
Empty state spot icons
Color
Each type has 2 variants:
- light backgrounds
- for dark backgrounds
Shape
For spot icons to be consistent, we aim to have icons fit within square parameters. However, if the design does not fit into a square aspect ratio, using the grid markup we can keep visual proportions consistent.
If spot icons are used in a card or within a box, we can use the native size, 60 x 60 pixels.
Format
SVG is our standard format.
When to use
Use standard spot icons to highlight key features or resources.
Spot icons are left-aligned in a 3 column content panel.
Spot icons are centred in a 4 column content panel.
Use spot icons in a 6 column content panel, rather than detailed icons.
- 6 detailed icons in a row can be difficult to differentiate because the outer border is the same.
- Spot icons can make this content clearer as they are easier to differentiate between.
Dos and don'ts
Don't
Don't
Don't
