Our design ecosystem includes a range of iconography. This section details the purpose of each type and how they should be applied.
At Dropbox, we have three categories of iconography. The table below outlines the distinct place and role of each category.
24×24 px (standard) 16×16 px (small) 32×32 px (large)
To serve as essential elements within Dropbox interfaces
UI icons have a minimal form and express essential characteristics
To provide contextual information
Pictograms have slightly more detail than UI icons and are not clickable
Sales and marketing assets
To clearly explain the benefit and utility of a product or feature
Spot icons are used when a product illustration might not be appropriate
Empty state / error message
Sales and marketing assets
To represent products and features in marketing
Hero icons use the most characteristic and expressive graphic elements of a product or feature
Table and Image placeholder
Large 160×160 px
Small 40×40 px
Content icons define how we visually display types of content in the Dropbox ecosystem and help users traverse their content.
Global icons overlaid on a container shape—typically a file or folder.
In abstract UI
In share links
To represent file and folder sync states
Sync icons use common cross-platform visual patterns to represent sync states
All OS-native platforms
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.
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.
Icons use the same colors as typography: Coconut on Graphite, or Graphite on Coconut.
Don’t draw your own icon. Submit a request to Brand Studio at drl/iconrequest.
Don’t use duo-tone coloring for an icon.
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.
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
Content icons exist in only two colors: Coconut and a derivative of Dropbox Blue.
Don’t recolor content icons.
Don’t use global icons to create new content 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.