Designing design systems: Constructing an icon system

A process for creating a unified brand experience through iconography

Two interlocking gradient circles (the left is pink-to-orange and the right is lavender-to-green). on a lavendar-to-orange gradient background

Graphic by Marco Mueller

It's impossible to open any application on any platform without having to interact with iconography, the clear and understandable visual metaphors that describe tools and topics.


Part of the language that forms a digital product experience, an icon system can include workflow icons that people use to interact with and manipulate objects; UI icons, like chevrons, that indicate that interaction is possible; status badges that show states and processes; and cursor styles, the hands and arrows, that provide supporting context for the expected interactivity (like dragging or resizing) of a selected tool.

A design system’s iconography not only creates a unified brand experience across a product portfolio, it also signals familiarity through a consistent and cohesive combination of UI elements, colors, patterns, and metaphors that describe tools and topics as simply and accurately as possible. For a portfolio as extensive and complex as Adobe’s that’s invaluable.

Two rows of two white rectangles on a light turquoise background. Each rectangle contains two rows of familiar iconography. in black outline Top left: file folder, two stacked squares, landscape image, sync arrows, heart, square with dog-eared lower corner, four squares, play arrow and reverse arrows on either side of a dotted line. Top right: right facing arrow, right facing chevron, x, diagonal arrow, checkmark, minus, triangle, asterisk, six dots. Bottom left: cloud icon with blue sync arrows, cloud idon with orange exclamation mark, cloud icon with red x, cloud icon with black pause bars, cloud icon with black exclamation mark, cloud icon with wifi signal strength. Bottom right: filled cursor arrow, empty cursor arrow, four-way arrows, curved two-sided arrow, pointed finger, hand, pen tool, eyedropper.
Design system iconography. Clockwise from top left: workflow icons, UI icons, cursor styles, and status badges (in combination with cloud icons).

Spectrum, Adobe’s design system, already had a robust icon system, but the time had come for a redesign. Evolving a design system’s icons can involve updating and/or redesigning assets, improving how icons are maintained and served to the teams using them, and creating a solution for adding, updating, and deprecating design elements within it.

Months of discovery, exploration, reviews, and sharing laid the groundwork for the icon team’s three-phase process. It began with extensive design exploration and beta testing to confirm the needs of product teams, and ended with implementing suggestions for improving search, customization, and serving icons. It’s a method of inquiry, feedback, and refinement that other teams can apply to their work.

Phase 1: Create a checklist of principles to guide design exploration

Our initial explorations for a new set of icons followed earlier sessions with an internal community of advisors, put in place to help the Spectrum team define where the system was headed and to document the principles that would guide decision-making. From those early working sessions, the icon team inherited a high-level checklist of principles that would guide early design explorations.

Fifteen yellow squares with words in black text placed randomly in three rows inside a white rectangle on a light turquoise background. Top row: (left to right) ability to respond, duo-tone, human emotional connection, component libraries, multiple icon sets, 3D illustrations in 3D apps. MIddle row (left to right): icons, illustrations and brand, responsive icons based on size, motion + transitions, flexibility. Bottom row (left to right): degrees of expressions, filled vs outlined icons, human representations, respect illustration trends, merging content.
Principles that could guide decision-making for iconography and illustration, compiled from early working sessions with an internal community of advisors.

Although nothing (from abstract ideas to intricate details) is off-limits during design exploration, a checklist provides a place to return to if anyone gets off track or the scope of work begins creeping. It should focus on those principles most important to the expression of your brand:

Some principles (like illustration, motion, and 3D) can be temporarily set aside to focus on what’s foundational to the launch of the system, but they should still be considered within the breadth of the work.

A design system’s iconography not only creates a unified brand experience across a product portfolio, it also signals familiarity through a consistent and cohesive combination of UI elements, colors, patterns, and metaphors that describe tools and topics as simply and accurately as possible.

Instead of meeting as one large working group, consider sharing ideas back-and-forth between two smaller ones: one focused on workstream (comprised of experts from product and product marketing along with an icon and design system designer) and another on icon design (comprised of designers specifically focused on icon production work). Discussing ideas, feasibility, and logistics between two groups, each with a different focus, can uncover complications that could stall progress if they come up later in the process.

As most people know, even when meetings are small, they can easily get off-track and run long. Setting ground rules and confining topics to a set amount of time can help keep conversations brief and constructive, but icon design meetings are most productive with a few additional guidelines for presenters:

Phase 2: Uncover product team needs through beta testing with a basic icon library

During the tail end of design exploration, make time to work in parallel with beta testers from product design teams who will be using the design system. Create a basic icon library of explorations so testers can use them in mockups and provide feedback. It will begin a useful cycle of implementing tester feedback to refine icons that can be shared back with testers for additional feedback.

Nine versions of the same vertical eight-icon toolbar, each with slight variations in line weight, filll, and color, inside a white rectangle on a light turquoise background. The third, sixth, and ninth version are white icons on a dark blue background. All others are black on light grey background. The toolbar includes (from top) a filled cursor arrow, a cursor arrow pointing to an anchor point on a path, a captial T, a circle, a square, a diagonal line, a pen tool, and a document.
As icons are refined, share them with beta testers for further feedback. Shown: A toolbar icon exploration showing in-progress designs for static, hover, and selected states for duo-tone, filled, and thick stroke.

As beta testing continued, Spectrum designers used icons from the new style library to craft previews of interface elements (such as cards, action button states, and header and panel alignment) in combination with Adobe’s brand font. The interface elements were shared with testers, along with UI mockups that compared the existing and new versions of Spectrum. Having versions side-by-side simplifies evaluation and feedback for everyone.


Sessions with product designers can be pivotal in exploring how well icon visuals will work when placed within the context of specific interfaces. Conversations can uncover edge cases, some of which will require solutions before you can move forward with the broader design of the system. A new or refreshed understanding of product team needs, in conjunction with what you already know about your design system, will help inform the details behind new icon designs:

Two pairs of screenshots of a left-side navigation inside a white rectangle on a light turquoise background. The pair of screenshots on the left, in both dark and light modes, incorporate the icons from the original version of Spectrum, and the pair of screenshots on the right, also both in light and dark modes, incorporate the icons from the new version of Spectrum.
Side-by-side UI mockups, that compare new and existing versions of icons, can simplify evaluation. Side navigation bar explorations for dark and light modes with original Spectrum icons (left) alongside new icon designs (right).

Most of the findings from beta testing confirmed our theories about where we should focus our design work. But “expressions” in this new design language would mean something different for every workstream and for every product. Designs for it could entail anything from adding gradients and animation to creating a stronger brand presence for illustrations based on the new iconography. Although not foundational to the launch, it's a great example of a finding that should be considered within the breadth of the design work so color variables, naming conventions, and metaphors would allow for these types of extended uses.

Phase 3: Define and finalize design details before production work begins

Design explorations and beta testing will resolve most design-related questions. But at the end of what can be a months-long process it’s time to finalize icon features. Although work can begin by looking at the solutions that are needed most (for Spectrum that was web and mobile), styles will eventually trickle into every product, so all final features must be ironed out before actual production work can begin. A list might include:

Two rows of two white rectangles on a light turquoise background. Each rectangle contains familiar iconography details. Clockwise from top left: stroke width and corner radius expressed with heavy black strokes and bright pink details, an icon set that would show up in a main navigation bar (house, share, trash can, avatar, image, stacked squares, document, and file folder), font pairings both freeform and in buttons, color and gradient explorations, and shape comparisons.
Styles will eventually trickle into every product, so design considerations must be ironed out before production work begins. Those might include (clockwise from top left) stroke weight and corner radius, icon sets (for home, share, delete, etc.), button states and baseline and icon placement with text, duo-tones, and expressive icons, and visual perception of keyshapes.

When working toward finalizing the specific features for icons, consider updating a new shared library. It can include streamlined workflows, accessibility, and, if needed, short-term solutions for transitioning between an existing and new version of your design system. Along with the shared library, provide an easy way for beta testers to comment on and rate design decisions.

Side-by-side on a light turquoise background inside two white squares are two versions of similar icon (a square with rounded corners with a plus sign in the center and a curved purple line in the upper left corner). Underneath the icon on the left are a red x and the words "stop exploring," and underneath the icon on the right are a green checkmark and the words "continue exploring."
As icon designs were being finalized, we provided an easy way for beta testers to comment on and rate some of our decisions.

It’s not only a great way to garner honest feedback from an entire community of stakeholders, it can also help finalize solutions that will resonate between products and implementations, and provide concrete ideas for improvements. Fold those recommendations into design takeaways:

Incorporate a naming logic

If thousands of design assets don't follow a certain naming logic it makes it difficult for design, product, and marketing teams to use them consistently. Streamline access to assets in a way that two teams can apply the same icon metaphor to their specific brand voice, and still maintain visual consistency. Incorporate a naming logic so assets can be referenced correctly and used consistently.

For Spectrum, we based icon names on shared terms (simplified categories like learn, video, illustration, generative AI), the tool the icon represents (a noun like vector, device, file), and a secondary action (a verb like add, remove, select). A new name might be “VectorDrawAdd” and the icon metaphor a pen with a plus sign modifier.

For a system to be successful, people need to be able to search the icon library using terms. Some people use descriptions, others search for function or a category, while still others rely on what they know the icon looks like or is named (although they’re often mistaken).

Two sets of images, one above the other, on a light turquoise background. Top image: Two rows of two white rectangles. Each rectangle contains lists of words with a green checkmark or a red x to the left. Top left: green checkmark "which icons they want," red x "doesn't know the name," green checkmark "searches visually by shape," and green checkmark "searches visually by synonym." Top right: green checkmark "knows the concepts to represent," red x "doesn't know how it should look like," green checkmark "relies on synonyms for successful search," and green checkmark "relies on function or category." Bottom left: red x "thinks they know how the icon looks like, but is mistaken," red x "doesn't know the name," green checkmark "searches visually by shape," and green checkmark "searches visually by synonyms." Bottom right: red x "know what their desired icon represents but is mistaken," green checkmark "relies on function but defaults to shape," and green checkmark "definition helps refine." Bottom image: Four columns with black type on a lavender background inside a white rectangle. Columns (from left to right): Under the heading "Icon" are a three-dots icon, a pen icon, an eyedropper icon, a lightbulb icon, and a house icon.. Under the heading "Function, Feature" are the words "more," "draw," "sampler," "tips," and "home." Under the heading Shape are the words "three, ellipses, dots," "pen," "eyedropper," "lightbulb," and "house." Under the heading "Metaphor" are the words "continue, options," "vector, write, sign," "pick up and apply," "ideas, learn," and "file repository."
Top: When we worked with our content strategy team to create a system for descriptive tagging, personas helped show the different ways people might search. Those insights helped us accommodate them in our tagging system. Bottom: An example of the tagging system associated with five familiar icons.

Descriptive tagging increases asset findability, supports consistency, and saves time. Work with content strategists, UX writers, or other experts to come up with an icon tagging system that supports the different ways people search. After creating a basic set of 3,000 tags, a search for terms like “draw,” “pen,” “vector,” or “write” all pull up the same pen icon.

Allow for customization

With every product launch, demand increases for varied icon usage. A “self-serve” assets builder—where designers can search, sample, recycle, and mix branded elements to customize icons based on their product needs—is a necessity. Think about the ways that content can be enriched depending on where, and at what size, it appears.

A white rectangle on a light turquoise background. Inside the white rectangle are dotted outlines of increasingly larger rectangles with words in them. From left: "in application," "learn and help content," "marketing," and "brand personality." To the right of the rectangles are five Adobe icons (from top): Acrobat, Photoshop, Express, Adobe (rainbow on black), Adobe (white on red). Underneath is a blue-to-pink gradient slider with the words "rational + lightweight" on the left and "emotional + in-depth" on the right.
We needed to account for a broad application of our icons, from rational (in-app and tutorial) to emotional (brand expression and marketing) before design considerations could be finalized.

Do explorations for how different product teams might pull together the same elements for different expressions (by making them larger, adding colors, gradients, or animation). The same monochrome icon used in an application can be repurposed for marketing content, by allowing for varying degrees of customization and expressiveness (from rational to emotional).

Create guidelines for pairing icons with type

There will be many ideas about how to create colorful icons and customize them in a way that the font, the iconography, and the UI components make nice pairings. The goal is a balanced look and feel—simultaneously shaped, sharpened, and softened by honing the negative spaces around the shapes of the icons and the letters of the typeface—with all parts complementing each other. Spectrum designers worked with the Adobe Fonts & Type team to refine the details of the relationship between Adobe’s brand typeface and Spectrum iconography.

A white rectangle on a light turquoise background. Inside the white rectangle are multiple icon and type pairings. Clockwise from top left: in white on a black background, a checkmark icon in a circle to the left of the words "Adobe Clean 14 pt," in white on a black background; three checkmark icons in circles different line weights; four icon and text combinations stacked (from top) in blue a lowercase i in a circle to the left of the word "Information" in white inside a blue button; in green a checkmark in a circle to the left of the word "Correct" in white inside a green button, in orange a exclamation point in a diamond to the left of the word "Notice" in white inside an orange button, in red an exclamation point in a triangle to the left of the word "Negative" in white inside a red button; and four of the same icon and type combinations inside light grey buttons (pencil icon to the left of the word "Action), in small, medium, large, and extra large sizes.
Explore and define design details for pairing icons with type. Shown: Adobe’s brand typeface coupled with Spectrum icon and button styles.

Offer multiple methods for serving icons

Because every team has unique dependencies and frameworks, offer multiple methods for displaying and implementing icons so teams can use the method that serves them best. SVG is an excellent native format. It serves all states in all color themes, provides a stable creation and export workflow in Adobe Illustrator, requires minimal effort to update color changes, and allows for app-specific custom colors. For Spectrum we also created SVG sprite sheets (a single SVG file containing every icon, along with a corresponding ID, that engineers can reference in their code).

Two rows of two white rectangles on a light turquoise background. Each rectangle contains various types of icons. Clockwise from top left: five rows of seven icons in black outline, three icons (conversation bubble, file folder, and remove graphic) in both black outline and multicolor gradient versions, the same document icon in black outline in multiple sizes, examples of monochrome, monochrome accented with a status badge, duo-tone, and multicolor icons.
SVG is an excellent native format. It serves all states in all color themes, requires minimal effort to update color changes, and allows for app-specific custom color.

This process of exploration, discovery, testing, and iteration can help lay the groundwork for the extensive icon production process that will follow—making it a more predictable and manageable part of the work.

A four row and seven column sample of icons all in black outline style inside a white rectangle on a light turquoise background. All icon backgrounds are squares with rounded corners but colors vary. Top row from left: a house on light pink, a document on light lavender, a globe on light turquoise, an avatar on light yellow, a landscape image on light pink, three horizontal lines on light lavender, and a bounding box on a light turquoise. Second row from left: a star on pink, a heart on lavender, a divided square on turquoise, an avatar in a circle on yellow, a lightbulb on pink, a pen tool on lavender, and an eyedropper on turquoise. Third row from left: four squares on dark pink, a cloud on purple, a paintbrush on dark turquoise, a file box on dark yellow, an up arrow inside an open box on dark pink, two arrows stacked on purple, and a lasso tool on turquoise. Bottomrow from left: trash can on dark pink, a curved arrow over a line on purple, two chain links on dark turquoise, a bell on dark yellow, a dashed-line box on dark pink, a paperclip on purple, and a document with a plus sign on dark turquoise.
A selection of Spectrum’s new icons on colored tiles.

Spectrum’s icons are being created by the Adobe Design Icons team, and there are many people who have helped, and continue to help, shape them, but I’d like to acknowledge the core team that's worked with vision, persistence, and passion to bring them to life: Spectrum leadership: Sonja Hernandez, Shawn Cheris; Spectrum core: Lynn Hao, Matt Knorr; Spectrum icons: Bettina Reinemann, Cristiana Costin, Julia Walter, Hinnerk Schmidt do Rego Silva, Gesine Grewoldt; Brand design: Marco Müller; Content strategy: Madeleine McGrath, Jess Sattell; Operations: Angelie Herreria-Tagle.

Header copy
Design your career at Adobe.
Button copy
View all jobs
Button link
/jobs