Icons

IBM’s icons are visual symbols used to represent ideas, objects, or actions. They can communicate messages at a glance, afford interactivity, and draw attention to important information. They draw from details found in the Plex typeface and work well at small sizes.

Resources

The foundation

The square grid is the underlying fabric of all IBM icons and is used as the foundation to determine line thickness, proportion, shape and positioning across the entire set of icons. The grid helps guide design decisions, which will ensure a unified approach but more importantly allows flexibility in creating the appropriate shape needed to communicate the right idea.

Play

Base grid

IBM icons are drawn on a pixel based grid of 32px x 32px and scaled down linearly to different sizes. Use the the grid as your basic guideline to snap the artwork in place. We recommend making fine tuned adjustments during your process to support the best shape and details for the shape you’re trying to achieve. three icons explaining clearance

32 x 32 base grid
Grid do example
Grid don't example
Example on pixel grid

Align design elements to the pixel grid.

Example off pixel grid

Avoid random decimal points in the x- and y- coordinates.

Padding

The grid contains 2px padding. This ensures icons will retain their desired scale and white space surrounding them when exported. Only extend artwork into the padding for additional visual weight or for specific details required to define the shapes content, meaning or character. three icons explaining clearance

grid padding example
icon with correct padding

Icon should remain inside the padding.

icon with incorrect padding

Don’t place any part of the icon in the padding area.

example showing how to correctly extend icons in to padding

Do extend icons into padding if additional space is needed.

example showing incorrect icon padding

Don’t crowd the design elements—make sure there is enough space between them.

Keyshapes

Key lines give you consistent sizes for basic shapes or proportions across the icon set. This makes it easier to create a visually stable foundation and helps to establish relationships between the similarly proportioned icons and the objects or ideas they represent.

keyshape compkeyshape exmaple
correct keyshape proportions

Do use the keyshape that best demonstrates the proportion of the metaphor.

incorrect keyshape proportions

Don’t use keyshapes that don’t reflect the real form of the metaphor.

proper keyshape form example

Do extend content beyond the keyshapes for proper form if needed.

incorrect keyshape form example

Don’t force the content to fit inside the keyshape.

Style

The stylistic conventions of IBM icons deliver a meaningful bond with our typeface IBM Plex™. Each icon is intentionally designed to harmoniously pair by sharing distinct details and characteristics found in the letterforms. The video below demonstrates some of these relationships between icons and letter which allows them to family well together visually.

Play
rounded exterior icon example

Rounded exteriors with 90° interiors

square terminals example

Square terminals

slab characteristics

Slab characteristics

distinctive point on tips

Distinctive point on tips

Strokes

One icon should not look heavier or lighter than other icons of the same size. Nor should there be different weights within one icon. Maintain the same visual weight by using a 2px stroke for all icons. There are a few exceptions to this rule and occur when the icons is complex or has a certain density of line (see below).

consistent stroke weights

Do be consistent with 2px stroke weights.

inconsistent stroke weights

Don’t use inconsistent stroke weights. They’ll feel unbalanced and look like a mistake.

complex details with stroke example

Do use a 1.5px stroke in instances where complex details are unavoidable.

incorrect stroke examples

Don’t make icons feel visually heavier than the rest of the set.

Perspective

The IBM Icons are designed and ready to use but if creating a icon to contribute back into the library please be sure to avoid dimensional representations and use more objective vantage points that are straight-on or profile views.

correct icon perspective

Use icon as it is.

incorrect icon in dimensional

Don’t create icon in dimensional.

Corners

Use a consistent corner radius of 2px for round shapes. The 2px radius can be increased by a multiple of two when necessary to make the icon’s metaphor understandable or object shape clearly defined.

Use an additional radius to make the metaphor reflect the real form of the object.

corner radius example

Do use squared corners when needed to reflect the real form of the metaphor.

incorrect rounded corners

Don’t force rounded corners if they don’t work for your metaphor.

square tip arrows

Do square the tips of arrows.

rounded tip arrows

Don’t use rounded arrow tips.

Angles

Use 45° angles for even anti-aliasing or increments of 15° whenever possible for other angles needed to best depict the shape you’re creating for your metaphor. You can create harmony across the icon set by consistently making angle sit on the same increments.

anglesangles example
angles

Do use multiples of 15° or an angle that best represents the metaphor when necessary.

incorrect angles

Don’t use 45° angles exclusively for all icons. It won’t work.