Icons v1

Simple, modern, and friendly visual helpers to guide our merchants to complete any task.

The work on Revel's icons is inspired by principles of balance, structure, modernity, approachability, crispness, intentionality, simplicity, and conciseness. They should have a sense of completeness and control, with border radius and open counters creating a combination of beauty and utility with a touch of personality. The elements of each icon should have a specific purpose and place, and be designed to minimize the time required for comprehension. The aim is for the icons to help users to understand the concept and take action, without getting hung up on superfluous visual elements.

Principles

Balanced

Icons should be designed to create a sense of balance and structure. They should be visually appealing and help guide the viewer's eye. Symmetry is not necessary, but the icon should bring a feeling of completeness and control.

Simple but effective

Design to reduce the amount of time needed to understand. Just as "invisible UI" helps users to complete tasks without being distracted by visuals or controls, icons should help users to grasp concepts and take action quickly, without spending extra time deciphering metaphors.

Crisp and modern

Pixel hinting as much as possible to create icons that feel crisp and with intention. Our icons are modern and approachable, with a touch of personality. They present a set of features that provides both beauty and practicality.

When to use them

• Primary navigation
• Banners
• Inline with text
• Empty states
• Calls to action
• Direct the merchant's attention

Icon grids

12px grid - Minor icons

Icons of size 12px are often found in small, supplemental roles to provide visual clarity and context to text or other elements. These icons are not interactive on their own, and require additional elements to be functional. On a 12px base grid, there is a 10px live area with 1px padding on all sides for optical sizing. Is important to vertically centre-align icons when next to text.

• Used inline to add clarity to an action
• Used in form elements (<input>, <button>, etc.)

20px grid - Major icons

The default size for icons is 20px. Most icons are built using a 20x20 pixel base grid, which has an 18px live area, with a 1px padding on all sides for optical sizing. Is important to inlcude a tooltip when using by itsel and to vertically centre-align icons when next to text.

• Used for navigation and to support the merchant's journey
• Used to draw attention to reinforce, or promote a particular area

Spot icons

Spot icons are visual elements used to emphasize and reinforce messaging in product experiences that are viewed multiple times. These icons help to draw attention to the message and ensure that it is understood. The default size for spot icons is 80px.

• Used on empty states
• Used for displaying any important status on merchant's or customer's flow

Stroke

Icons should have a stroke weight of 2px, with rounded line caps unless doing so would distort the intended metaphor or to suggest depth or element clipping. Round line joins are optional and can be used depending on the metaphor.