Iconography

View in Figma

Icons symbolize common actions and features on our product To avoid visual clutter in a product with high information density, we use icons sparingly. As a general guide, consider using icons in places where visual density is already high.

While it's generally a best practice to pair icons with text for accessibility, we prefer to use icons without text because we reach for icons when we're designing for compact spaces where text labels would overwhelm the interface.

Rather than design a custom product icon set, we use Google's Material Icons.

We chose Material Icons because:

  • We don't use icons to brand our product or make it recognizably ours
  • We use icons sparingly, and prefer clarity over personality
  • We want icons that are easy to recognize and understand
  • We want to lean on well-established conventional icon meanings
  • Material Icons are a large, well-supported open source library
  • We want an extendable icon system for times when we need a specialized icon

Creating Custom Icons

When Material doesn't include an icon we need, we can create custom icons that are consistent with Material's icon design principles.