Iconography

Focused

Be bold and direct to allow the user to complete the task as quickly as possible.

Encouraging

Guide the user so they feel confident and empowered when using our product.

Spirited

Create trendsetting designs that delight our customers with motion, celebration, and color.

Icons are built from a central circular element. They’re made to be bold, simple, and geometric. They have a symmetrical and expressive look to ensure readability and clarity of the visual at a smaller scale. These icons appear in action cells, navigation bars, home menu, etc.

System icons are created within and are displayed as 24 x 24px.

Icon grid

Create icons for viewing at 100% scale for pixel-perfect accuracy.

Icon at 100% scale

Contain and ship icons within a 24 x 24px transparent square background.

The icon’s content is always inside of the live area with 2px of padding around.

Live area

Content may only extend 1px if visual weight is needed.

Margins

If you need more visual weight, you can extend the only 1px into the margin of padding. No parts of the icon should ever extend past the grid.

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.

Positioning

The icon grid helps position graphic elements consistently.

Shapes and geometry

Keylines are available for circles, squares, rectangles, orthogonals, and diagonals.

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.

Use integers without decimals. This helps position the icons on the grid.

Place or create an icon on a coordinate that isn’t “on pixel.”

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.

Keep icons front-facing.

Never create icons in a perspective view.

The default icon size is 24 x 24px, but it can vary. When scaling icons on Adobe Illustrator, remember to turn on “Scale Corners” and “Scale Strokes and Effects” to get the same rounded corners and bold lines.

Line boldness and corners remain the same when scaled appropriately.

As you scale, avoid icons losing boldness, corners getting sharp, and spacing.

Icons are centered within container shapes.

Center the 24×24 icon within the hexagonal shape.

Never misalign or off-center the icon within the hexagonal shape.

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

Use consistent stroke weights with rounded stroke terminals.

Do not mix inconsistent stroke weights or mix flat and rounded terminals.

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.

Use rounded corners with a radius of 2px.

Avoid using sharp corners with flat terminals.

Different icons usage, states, and variations within product.

WHITE + neutral BKGS

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]

Dark + COLORED BKGS

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.

8px all around the icon.

Distance between icon and text is 8px.

Icons should never be paired to convey another meaning. Icons are NOT meant to be a replacement for words.

Use text in conjunction with icons.

Avoid mixing icons together.

Certain icons are open to global specific metaphors.