Skip to main contentIBM Design Language

App icons

IBM app icons are visual symbols used to represent products or services. They identify apps at a glance for users while serving as a unique expression of our brand.

Resources

Overview

App icons visually communicate the core idea of a product or service through either objective or abstract form. Expressive and distinct, each icon serves to identify apps at a glance, while collectively appearing to be part of a whole. All app icons are constructed on the same 32px grid and share many stylistic properties of UI Icons. Several different forms of app icons exist to serve the needs of different products, services, and the contexts in which they appear.

Stroke app icons

Drawing from the visual expression of Watson, stroke app icons bring in light strokes and color gradients to stand out from product UI icons. Stroke app icons work best in product situations where app icons, UI Icons, and typography appear in the same context.

Stroke app icons example

Style

Stroke app icons are largely based on the styling of UI Icons, following all of the same production guidelines other than color. When creating a stroke app icon, reference the UI icon guidance as a starting point.

Elements

All stroke app icons consist of three elements: A color gradient, a gradient stroke, and a solid stroke. Each of these elements must appear at least once in the icon, and separate elements do not touch each other.

App icon with touching gradient and solid strokes

Gradient strokes and solid strokes do not touch.

App icon with gradient strokes only

Stroke app icons must include both solid and gradient strokes.

Color gradient

The color gradient provides color to the gradient stroke of the icon. This layer remains stationary on the icon grid at 45° and is masked by the gradient stroke for consistent color across each icon.

Here are the 4 standard icon colors. Note that the colors are adjusted for both light and dark backgrounds to appear best in either context. Additional color gradients can be created from any acceptable 2-color family. Refer to the table below when creating new color gradients.

Color gradients for dark backgrounds
Color gradients for light backgrounds
Icon themeColor value 1Color value 2
Dark5040, 30
Light6050, 40
App icon with incorrect gradient specs

Don’t alter the angle or scale of the color gradient.

App icon with incorrect gradient colors

Don’t use unapproved color gradients.

Gradient stroke

The gradient stroke portion of the icon features an alpha gradient (a gradient that blends between 100% and 0% opacity). This element serves as a mask for the color gradient.

Isolated gradient stroke
App icon without an alpha gradient

The gradient stroke must include an alpha gradient.

App icon with a harsh alpha gradient

Don’t make the alpha gradient too harsh.

App icon with a radial gradient

Don’t use radial gradients.

App icon with a horizontal gradient along stroke

Don’t use gradient horizontally along the stroke to create faded edges.

Solid stroke

The solid stroke features no gradients of any kind, and it is used as an accent or to emphasize a part of the icon. Be purposeful with which part of the icon is comprised of the solid stroke; don’t add emphasis to insignificant parts of the icon.

Isolated solid stroke
App icon with incorrect emphasis

Don’t add emphasis on insignificant parts of the icon.

App icon with an alpha gradient on the solid stroke

Don’t use alpha gradient on the solid stroke layer.

The color of the solid stroke can be either Gray 10 for dark backgrounds or Blue 90 for light backgrounds. These colors work great for either context and with any approved color gradient.

App icon with incorrect theme

Don’t use dark theme colors on light theme and vice versa.

App icon with purple solid strokes

Don’t use other solid stroke colors.

Fill app icons

As an alternative to stroke app icons, fill app icons communicate the core idea of the app with more simplicity and abstraction. These icons should focus on the bigger concepts of the product or service, such as scale, transaction, integration and so on.  Functionally, fill app icons work best in situations where you need to call attention to the app with more visual weight or a larger color field, as opposed to the light, linear form of fill app icons.

Fill app icons example

Style

Fill icons are created by combining, intersecting, and subdividing two core shapes: the square and the circle. These shapes can be scaled to fit within the grid to allow for endless possibilities.

Absurdly complex app icon

Avoid making icons too complex.

House app icon

Avoid making icons too literal.

App icon with organic shapes

Don’t use organic shapes.

Elements

Fill icons consist of up to three elements: A primary gradient, a secondary color, and a tertiary gradient. All fill app icons must have at least one primary gradient, and at least one secondary color and/or tertiary gradient. Any element can exist in more than one shape, that is, two separate shapes with primary gradient.

App icon without a primary gradient

Fill icons must include at least one shape with primary gradient.

App icon with primary gradients only

Fill icons must include at least one secondary color and/or tertiary gradient.

Primary gradient

The primary gradient is the primary element of the icon consisting of a blend between any acceptable 2-Color Family from the color palette. Due to the larger color fields possible in fill icons compared to stroke icons, it is possible for a wider range of color gradients to work well on both light and dark backgrounds. Please reference the color guidelines when choosing the right color gradient for your app icon.

Isolated primary gradient
App icon with three primary gradients of different color families

Don’t use more than one 2-Color Family for the primary gradient.

App icon with multiple color values of the same color family

Don’t use different color values for the primary gradient.

App icon with one primary gradient of 3 colors

Don’t create gradients with more than two colors.

App icon with radial gradient

Don’t use radial gradients.

Secondary color

Secondary color can be used as an accent or to place emphasis on part of the icon. Use either Gray 10 for dark backgrounds or Blue 90 for light backgrounds.

Isolated secondary color
Dark theme app icon on light background

Don’t use dark theme color on light theme and vice versa.

App icon with magenta as secondary color

Don’t use other colors for secondary color.

Tertiary gradient

The tertiary gradient is a very light and subtle supporting element designed to fall somewhat to the background. It consists of an opacity gradient using either Gray 10 for dark backgrounds or Gray 100 for light backgrounds.

Isolated tertiary gradientTertiary gradient for dark backgrounds

Tertiary gradient for dark backgrounds

Tertiary gradient for light backgrounds

Tertiary gradient for light backgrounds

IBM Plex® app icons

IBM Plex can also be sized for use as product or service identifiers. Use the icon grid as a guide to ensure type appears clear and proportional alongside other iconography.

Style

For app icons, bold weights of IBM Plex Sans work best. You may choose to use Plex Mono or italics Plex fonts when it makes sense for your product or service.

IBM Plex Bold

Use bold weights of IBM Plex and default to Plex Sans.

IBM Plex Light

Don’t use lighter weights.

IBM Plex Bold Italics used to reference a function

You can use Plex mono and italics Plex fonts when it makes sense to do so.

IBM Plex Bold Serif

Avoid use of Plex Serif.

IBM Plex Bold without styling

Use solid type.

IBM Plex Bold outlined with a stroke

Don’t outline type.

Typesetting

When setting type on the icon grid, use smaller type sizes as character count increases in order to fit the type comfortably. Please do not alter other type specs, such as tracking, kerning and vertical or horizontal scale.

IBM Plex app icon with 6 characters

Don’t use more than 3–4 characters max.

IBM Plex app icon with two lines of type

Don’t use more than one line of text.

IBM Plex scaled horizontally

Don’t stretch the type.

IBM Plex with increased tracking

Don’t alter the tracking.

Alignment

Always keep type center aligned within the icon grid, and adjust for optical alignment when needed. Keep baselines aligned to a grid division and respect icon padding guidelines.

IBM Plex centered and aligned to the icon grid

Center typography while aligning the baseline to the icon grid.

IBM Plex set on an off-pixel

Don’t place the baseline off-grid.

IBM Plex placed 1px to the left for optical center alignment

You can adjust horizontal alignment when optical centering is needed.

IBM Plex bottom-left aligned to the icon grid

Don’t left, right, top, or bottom align the type.

IBM Plex centered within icon padding

Place type completely within the icon grid.

IBM Plex cropped

Don’t crop.

Color

You can use color and gradients with typography. Always choose a color within the palette and follow the color guidelines for gradients.

IBM Plex in blue

You can use one color value within the color palette.

IBM Plex in both magenta and purple

Don’t use multiple colors.

IBM Plex with a gradient

You can use gradients across the entire icon.

IBM Plex with multiple gradients

Don’t place gradients on separate elements of the type.

Hero brands and third parties

Products and services often need to be represented with logos in environments such as marketplaces, especially when it is delivered by a third party or IBM partner company. Placement within the icon grid can help to ensure logos look great alongside other iconography.

Alignment

While most logos don’t align perfectly to the icon grid, it is important to align any icon artwork to the grid as best as possible. Center logos and align edges to grid divisions while respecting icon padding guidelines.

Third party logo centered within icon padding

Optically center logos and align to the icon grid as best as possible.

Third party logo top-left aligned to the icon grid

Don’t left, right, top or bottom align logos.

Third party logo extending appropriately into icon padding

Use the padding occasionally for optical centering.

Third party logo extending inappropriately into icon padding

Don’t place logos in the padding unless absolutely necessary.

Keyshapes

When logos have a background container, use keyshapes to guide your design. This makes it easier to create a visually stable foundation and helps to keep visual weight consistent between icons.

Keyshapes grid example