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.
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.
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").
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.
Spectrum icons are monochromatic. The icon color varies depending on the interactive state (e.g., default, hover, disabled) and the color theme.
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.
Icon designs include a safe area to ensure flexibility for finding the best positioning and balance in a layout.
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.
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.
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.
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.
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.
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.
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.
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.