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
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
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
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
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
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
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.
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.
The circular icon shape is modeled on the rounded elements in Sharp Grotesk. All icon circles are slightly squared. None are perfectly circular.
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.
Color
Icons use the same colors as typography: Coconut on Graphite, or Graphite on Coconut.
Don'ts
Don’t draw your own icon. Submit a request to Brand Studio at drl/iconrequest.
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
Color
Content icons exist in only two colors: Coconut and a derivative of Dropbox Blue.
Don'ts
Don’t recolor content icons.
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.
Don'ts