Identity
ILLUSTRATION
Iconography
Our icons are solid-colored shapes that are simplistic, vibrant, and easy to understand. *chefs-kiss*
.svg)
.svg)
.svg)
.svg)
.svg)
.svg)
.svg)
.svg)
.svg)
Our iconography
Literal things should reflect real life. Abstract ideas should be easy to understand.
Our icons are flat and lean more towards 2D. They can have 3D elements as long as the overall iconography still appears simple (e.g. shopping bag, suitcases).
96 px.
Minimum
124 px.
Maximum
Icon sizes
Our iconography is illustrative and designed to be legible in small sizes. However, it’s not material design.
Our iconography should only be between 96-124px.
Generally, the image block should be 65% of the background block.
The image is always center aligned to the background and should not exceed the image block.
If the space an icon is needed for is smaller than the above guidelines, please consider using material design icons or similar.
.svg)
Horizontal image touches left and right sides of image block
.svg)
Vertical image touches top and bottom sides of image block
Background & image relationship
For rectangular images, the sides of the image should touch the wider edges of the image block.
It’s more important for the images to look visually similar in size. If the image looks too small or too big amongst the other iconography, adjust accordingly.
Shipping box looks too big against the background block.
.svg)
After reducing its size, the box looks more proportional to the reference image.
Icon alignment
It’s more important for the image to center align visually rather than literally.
Piggy bank looks lower in the background circle even thoughit’s technically center aligned.
After moving piggy bank up slightly, the icon looks more balanced.
Message: Hotel search
Primary subject: Hotel
Secondary subject: Search
The magnifying glass is the frame being used.
Message: Digital card
Primary subject: Card
Secondary subject: Digital
The phone is the frame.
Icon frames
When the primary subject of the icon requires a secondary subject to reinforce the concept, a frame can be used. However, the primary subject should still take precedence.
A frame that represents something bigger than the primary subject can fill the edges of the background block.
Icon colors
Our iconography colors are expanded from our primary and tertiary brand colors. The colors we use in iconography are vital. They keep our set of iconography cohesive. Overall, our iconography colors are balanced. Backgrounds tend to be lighter in color with a darker yellow to help contrast white images. Backgrounds are always single-colored. Images should have 2-5 colors.
Brand colors
Iconography colors
Image colors
These colors should take prominence in the image
These colors would be used to build contrast and bring balance to the image
Background colors
Avoid low contrast, soft tones, and any one color overpowering the icon
Low contrast between background and calendar
Machine too light against the background
Purple is too dark as a background
Low contrast between yellow, pink and blue
Black is overpowering the icon while the rest has too little contrast
Aim for a balanced contrast and overall vibrance
.svg)
.svg)
Balance in sharp and round corners, as well as straight and curved edges.
While the left side of the image is fuller, the brightness of the pink sun balances out the composition.
Sharp edges around the photography is balanced by the soft landscape.
Thinner line within the hotel sign is balanced out by the boldness of the sign.
Iconography design principles
Since our icons are illustrative, it gives us more freedom in design principles.
While there isn’t a specific guide to the exact radius degree or line weight, we aim for balance between sharp and round, thick and thin, and bright and dark.
Type in icons
We don’t use typography in our icons very often, but when we do, we use Poppins. It’s our secondary brand typeface. This includes dollar signs and symbols.
Super Bolts
Bolts are always pink in our iconography when symbolizing Super.com and our products.
Iconography best practices
Do not use illustrative iconography for bigger formats. If the image needed exceeds 124px, it should be a spot (or mini spot) illustration.
.webp)
Do not use illustrative iconography for super small formats. If the image needed is under 96 px, it should be product or material icon.
.webp)
Use iconography to break up heavy copy
