Visual Imagery

Iconography

Our design ecosystem includes a range of iconography. This section details the purpose of each type and how they should be applied.


Intro

Iconography categories

At Dropbox, we have three categories of iconography. The table below outlines the distinct place and role of each category.

Global icons

UI

Iconography Intro Ui-Icon

Size

24×24 px (standard) 16×16 px (small) 32×32 px (large)

Purpose

To serve as essential elements within Dropbox interfaces

Characteristic

UI icons have a minimal form and express essential characteristics 

Use case

  • Product UI

  • Signed-out web 


Pictogram

Sync icons

Size

64×64px

Purpose

To provide contextual information

Characteristic

Pictograms have slightly more detail than UI icons and are not clickable

Use case

  • Signed-out web

  • Admin console

  • Presentation

  • Sales and marketing assets


Spot

Iconography Intro Spot Icon

Size

120×120px

Purpose

To clearly explain the benefit and utility of a product or feature

Characteristic

Spot icons are used when a product illustration might not be appropriate 

Use case

  • Empty state / error message

  • Presentation

  • Sales and marketing assets


Hero icons

Overview 2-1

Size

Custom

Purpose

To represent products and features in marketing

Characteristic

Hero icons use the most characteristic and expressive graphic elements of a product or feature

Use case

  • Product announcement

  • Signed-out web

  • OOH


Content icons

Table and Image placeholder

Intro-Content Icons

Size

Large 160×160 px

Small 40×40 px

Purpose

Content icons define how we visually display types of content in the Dropbox ecosystem and help users traverse their content. 

Characteristic

Global icons overlaid on a container shape—typically a file or folder. 

Use case

  • In product

  • In abstract UI

  • In share links


Sync icons

Synched icons

Size

24×24 px

Purpose

To represent file and folder sync states

Characteristic

Sync icons use common cross-platform visual patterns to represent sync states

Use case

All OS-native platforms


Universal Principles

1. Complementary with Sharp Grotesk

Dropbox iconography incorporates style elements from the brand typeface, Sharp Grotesk. This creates a seamless and harmonious relationship between typography and iconography. Using bold and geometric shapes with a symmetrical and consistent look, the icons ensure readability and clarity, even at small sizes. 

Iconography Intro Sharp Grotesk 2

2. Square and rounded elements

The icon system uses a mix of round and square corners, to complement the characteristics of Sharp Grotesk. When creating a new icon, be sure it has a combination of round and square corners to maintain consistency within the system.

Iconography Intro Sharp Grotesk
Sharp Grotesk-1
h337WwUA

The circular icon shape is modeled on the rounded elements in Sharp Grotesk. All icon circles are slightly squared. None are perfectly circular.

Iconography Intro Squircle

Rules 


Global icons

Global icons come in a range of sizes, specifically designed for different use cases across the Dropbox brand and product ecosystem. Pictograms and spot icons can offer more detail because they have more pixels. For example, you can add a motion or sound line to a bell. 

Iconography Intro Overview 1

Color

Icons use the same colors as typography: Coconut on Graphite, or Graphite on Coconut. 

Iconography Intro Color

Don'ts

Iconography Intro Dont-Color-2

Don’t draw your own icon. Submit a request to Brand Studio at drl/iconrequest.

Iconography Intro Dont-Color

Don’t use duo-tone coloring for an icon.


Content icons

For Dropbox web and mobile, content icons exist in our Dropbox visual style. On OS native platforms, content icons use system icons overlaid over system folders.

Content icons:

  • Come in a large and small size

  • Define how we visually display types of content in our ecosystem

Content icons do not:

  • Define the UX for entrypoints to content types or apps

  • Serve as a marketing tool in product

Intro-Content-Icons-2

Color

Content icons exist in only two colors: Coconut and a derivative of Dropbox Blue.

Content-Icons-Color

Don'ts

Content-Icons-Dont-Color

Don’t recolor content icons.

Content-Icons-Dont-Create

Don’t use global icons to create new content icons.


Sync icons

Sync icons represent an item’s state – whether it is available offline, online, or is in the process of syncing. They are consistent across platforms (MacOS, Windows, Mobile). They follow common graphic patterns and are designed to be readable at very small sizes in both day and night mode. Their color is also standard across platforms and is indicative of the different sync states.

Sync icons

Don'ts