Guidelines

Design
Code
keyboardshortcuts
d
Design
c
Code
,
Previous Section
.
Next Section
/
Toggle Preview Environment
[
Previous Platform
]
Next Platform
command +
Scroll to Top
command +
Scroll to Bottom

Graphically represent an object or action.

Add or edit icons while keeping a consistent set coherent across platforms.

Style

Our iconography style relies on our personality traits: smart and reliable.

This icon style can be described as “approachable”. Hard shapes are softened for personality but never gratuitously rounded or bubbly to feel overly playful. Put another way: sports are fun, but we know athletes and coaches take their sport seriously.

Metaphor

Supporting our predictable design principle, we strive to use industry standard metaphors.

settings
Settings
help
Help
search
Search
edit
Edit
share
Share
play
Play
add
Add
user
User

For unique features where an industry standard has not yet been established, clarity is the guiding principle.

Color

Our standard icons are glyphs and should be filled with a single solid color, presented without shadows.

messagesmessagesmessagesmessagesmessagesmessages

Usage

Our icon component shows how categorizing icons guide how they should be used within an interface.

Style

It’s always best to prefer clarity over cleverness and style.

iconography-style-dont

Don'tbe too playful or abrasive.

iconography-style-do

Doput clear meaning over style.

Metaphor

Icons without an established metaphor should be supported with text. Always use the correct icon with its intended meaning.

iconography-metaphor-dont

Don'tuse an existing metaphor to define a new icon.

iconography-metaphor-do

Douse the right icon for the right metaphor.

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Stick to the guidelines above.
Android
  • Stick to the guidelines above.