Adobe Logo

Spectrum

Iconography

Spectrum icons are clear, minimal, and consistent across platforms. They follow the focused and rational principles of our design system in both metaphor and style. Icons can be viewed and downloaded on the Icons page.

Table of contents#

Characteristics#

Metaphors#

Adobe products often have complex controls, so our icon metaphors are clear, strong, and additive to experiences. They describe tools and topics as simply and accurately as possible. Icons that attempt to relay too much information often become busy and don't read well at small sizes.

We use existing metaphors whenever possible to maintain consistency between products and also to help avoid confusion for users. Metaphors don't change based on operating system, with the exception of specific icons that follow platform standards.

Key example showing eight icons and labeled metaphors. Brush, Image, Select, Crop, Archive, Layers, Table, Email.

Platform-specific#

Spectrum is multi-platform, so we ensure that our icons are as similar as possible across all platforms. Some icons are particularly prevalent on specific platforms. In these rare cases, it’s beneficial to follow the system’s established metaphors, so we provide platform-specific icons (e.g., "share").

Key example of three different platform icons for the same metaphor of "Share." Platform agnostic, Android, and Windows versions.

Appearance#

Most icons are filled, but some are designed to use both a fill and a stroke in order to more clearly illustrate a concept. An icon’s stroke width can also vary, depending on the metaphor.

Key example showing various icons in different strokes and weights for different visual effects.

Color#

Spectrum icons are monochromatic. The icon color varies depending on the interactive state (e.g., default, hover, disabled) and the color theme.

Key example showing the same icon for "Layers" for light and dark color themes and three states: default, hover, disabled.

Sizes#

Spectrum icons come in two sizes: 18 px for desktop scale and 22 px for mobile scale. All icons are pixel-snapped and optimized for their specific size. Learn more about the platform scale system.

Key example showing the same icon, "Export," for desktop and mobile scales.

Layout#

Icon designs include a safe area to ensure flexibility for finding the best positioning and balance in a layout.

Key example showing safe areas, in pixels, for three icons in both desktop and mobile sizes. Icons are "Circle," "Cut," and "Clipboard."

Pixel snapping#

Desktop icons are snapped to a full pixel, while mobile icons are snapped to up to half a pixel because of screen resolution. On rare occasions, an icon design may be off-center in order to place it exactly on a grid.

Key example showing pixel snapping for desktop and mobile versions of a "Time" icon.

Stroke width#

Desktop icons have a 1 px or 2 px stroke width, while mobile icons have a 1.5 px or 2 px stroke width.

The thinner stroke width (1 px or 1.5 px) is the most common for horizontal and vertical lines. The thicker stroke width (2 px) can help when more visual weight is required to achieve balance.

Key example showing different stroke weights for the same icons, "Select" and "Share," for desktop and mobile versions.

Corner radius#

Most icons with angles get a pixel rounding treatment in order to not lose any angle sharpness. Inner corners are not rounded, but are square.

Key example showing how angles on icons are given a rounding treatment of 0.25 pixels or 0.5 pixels.

Workflow and UI icons#

Workflow icons#

Workflow icons are graphical metaphors or symbols that users interact with to navigate and manipulate objects. They all appear at the same size within each platform.

Key example showing various workflow icons used in buttons and a menu. Labels Document setup, Settings, Project, Apps, Settings, Support.

UI icons#

UI icons are atomic pieces (e.g., arrows, crosses, etc.) that are parts of a component definition. Unlike workflow icons, UI icons come in various sizes.

Key example showing UI icons in a dropdown in a selected state and two tags.

Usage guidelines#

Respect an icon's fill#

Spectrum icons are designed to carry a similar visual weight when sitting next to one another. Changing an icon to an outline can make the icon hard to read for users and feel like a different visual language.

Key example showing the correct usage of filled icons. Icons shown are for plush, paint brush, camera, profile and cloud.
Key example showing the incorrect usage of filled icons. Icons shown are for plush, paint brush, camera, profile and cloud.

Don't scale icons#

Every single icon is pixel-snapped for its particular size, so don't arbitrarily scale icons to fit your designs. This can cause the proportions to be off-balance and can create unintended hierarchy within the experience. Icons are carefully designed to have consistent stroke weights, corner radii, and proportions at each size.

Key example showing the correct usage of scaled icons. Icons shown are for align left, center, align right, align down and horizontal align all in the same size and scale.
Key example showing the incorrect usage of scaled icons. Icons shown are for align left, center, align right, align down and horizontal align in different sizes and scales.

Be careful when using letters in icons#

Letters in an icon design usually don’t scale for global audiences, since words for metaphors differ across languages. An icon that uses a letter in one language in order to convey a metaphor may not be understood by those who do not speak that language.

It’s acceptable to use letters in icons only when the icon is conveying a standardized concept, such as “bold,” “italic,” “underline,” or a tag in code.

Key example showing correct usage of icons with letters. Icons for "Type," "Bold," "Italic," and "Underline."