IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

AccessibilityIconUiExpandCollapseDown
ColorsIconUiExpandCollapseDown
LayeringIconUiExpandCollapseDown
LayoutIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Iconography

/

Design

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.

IconSettings
Settings
IconHelp
Help
IconSearch
Search
IconEdit
Edit
IconShare
Share
IconPlay
Play
IconAdd
Add
IconUser
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.

IconMessagesIconMessagesIconMessagesIconMessagesIconMessagesIconMessages

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.

Don't be too playful or abrasive.

Don'tbe too playful or abrasive.

Do put clear meaning over style.

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.

Don't use an existing metaphor to define a new icon.

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

Do use the right icon for the right metaphor.

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.