Focused
Be bold and direct to allow the user to complete the task as quickly as possible.
Be bold and direct to allow the user to complete the task as quickly as possible.
Guide the user so they feel confident and empowered when using our product.
Create trendsetting designs that delight our customers with motion, celebration, and color.
System icons are created within and are displayed as 24 x 24px.
The icon’s content is always inside of the live area with 2px of padding around.
All shapes are built from a central circular element for a friendly and unified look. The grid and defined basic shapes help us keep a consistent look with consistent placement.
Position icons “on pixel” by making the X and Y coordinates into integers without decimals. This helps avoid pixel misalignment or distortion. Shapes, lines, and dots should also follow this pattern to ensure pixel-perfect icons.
Understanding the anatomy of system icons helps you better communicate with other designers.
Icon should always be front-facing and never in a perspective view. Compositions with perspective require more detail and a higher level of polish, and can be harder to see at a smaller scale.
Icons are centered within container shapes.
Always use a 2px stroke with curves, angles, accents, and both interior and exterior strokes. Use consistent stroke weights and rounded stroke terminals. Don’t use or mix inconsistent stroke weights together.
Stoke weight: 2px
Cap: Rounded cap
Corner: Rounded join
Align stroke: Center
Keep radiuses defined at 2px. Interior corners should be square (not rounded). For shapes 2px wide or less, stroke corners can be rounded at 1px if needed.
Different icons usage, states, and variations within product.
Default
Icon color: Gray02 (#6B6C72, 100% opacity)
Background: White (#FFFFFF, 100% opacity)
Hover
Icon color: Gray02 (#6B6C72, 100% opacity)
Background: Gray 03 (#8D9096, 25% opacity)
Active
Icon color: Gray02 (#6B6C72, 100% opacity)
Background: Gray 03 (#8D9096, 40% opacity)
Selected
Icon color: Gray01 (#393A3D, 100% opacity)
Background: Gray 03 (#8D9096, 40% opacity)
Focus
Icon color: Gray02 (#6B6C72, 100% opacity)
Background: White (#FFFFFF, 100% opacity)
Line: Blue02 (#0077C5, 50% opacity) [Line weight 2px, Position outside, Rounded joints+ends]
Default
Icon color: Gray04 (#BABEC5, 100% opacity)
Background: QB Gray (#393A3D, 100% opacity)
Hover
Icon color: Gray04 (#BABEC5, 100% opacity)
Background: Gray 04 (#BABEC5, 25% opacity)
Active
Icon color: Gray04 (#BABEC5, 100% opacity)
Background: Gray 04 (#BABEC5, 40% opacity)
Selected
Icon color: Gray06 (#E3E5E8, 100% opacity)
Background: Gray 04 (#BABEC5, 40% opacity)
Focus
Icon color: Gray04 (#BABEC5, 100% opacity)
Background: QB Gray (#393A3D, 100% opacity)
Line: White (#FFFFFF, 50% opacity) [Line weight 2px, Position outside, Rounded joints+ends]
There should be enough space surrounding the system icon to allow for legibility and tapability.
Icons should never be paired to convey another meaning. Icons are NOT meant to be a replacement for words.
Certain icons are open to global specific metaphors.