Icons

Convey meaning through symbols.

Our icons are heavily inspired by the platforms our apps live on, and they feel right at home. When appropriate icons are not available, we make our own versions for every single platform based on their own system’s metrics and principles.

Android

Material Design

We source the majority of our Android UI icons from Google’s Material Design. This helps us move quickly and maintain visual consistency.

Guidelines

Material Design

  • Always use the “filled” theme
  • Use SVGs instead of raster images

iOS

We source our icons from the system and SF Symbols. SF Symbols can be used in apps running on iOS 13 and later. To browse the full set of symbols, download the SF Symbols app.

Guidelines

  • For custom icons, create @1x, @2x and @3x versions so they look pixel-perfect
  • Use raster images instead of vector data

Web

For web apps, we prefer existing icons designed for iOS.

Creating custom icons

Create recognizable, highly-simplified designs

Too many details or striving for metaphor that is too far fetched can be confusing. Icons should be universally recognizable.

Make sure icons are legible

In general, solid icons tend to be clearer than outlined icons. If an icon must include lines, coordinate the weight with other icons and your user interface typography.

Avoid including text in an icon

If you need text, display a label beneath the icon and adjust its placement accordingly.

Provide accessibility labels

Icons must be accessible to users that rely on screen readers (such as VoiceOver) to navigate user interfaces.

Platform Icons

These icons represent common sections, tasks, or actions across our products.

Colored icons for rows

Indicators and badges