App icons

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.

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 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.

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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.