UI icons
As visual symbols, IBM user interface icons represent ideas, objects or actions. They can communicate messages at a glance, afford interactivity, and draw attention to important information. Based on details from the IBM Plex® typeface, they work well at small sizes.
Resources
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 helps ensure a unified approach. More importantly, it allows flexibility in creating the appropriate shape needed to communicate the right idea.
Base grid
IBM icons are drawn on a pixel-based grid of 32px x 32px and scaled down linearly to different sizes. Use the grid as your basic guideline to snap the artwork in place. We recommend fine-tuning adjustments for the shape you are trying to achieve during creation.
Align design elements to the 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 surrounding white space when exported. Only extend artwork into the padding for additional visual weight or for specific details required to define the shape’s content, meaning or character.
Icon should remain inside the padding.
Avoid placing part of the icon in the padding area.
Do extend icons into padding if additional space is needed.
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.
Do use the keyshape that best demonstrates the proportion of the metaphor.
Don’t use keyshapes that don’t reflect the real form of the metaphor.
Do extend content beyond the keyshapes for proper form if needed.
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 letters which allows them to family well together visually.
Rounded exteriors with 90° interiors
Square terminals
Slab characteristics
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 which occurs when the icon is complex or has a certain density of line. See examples shown here.
Do be consistent with 2px stroke weights.
Don’t use inconsistent stroke weights. They’ll feel unbalanced and look like a mistake.
Do use a 1.5px stroke in instances where complex details are unavoidable.
Don’t make icons feel visually heavier than the rest of the set.
Perspective
The IBM icons are designed and ready to use. However, if creating a new icon to contribute to the library, please be sure to avoid dimensional representations. Use more objective vantage points that are straight-on, or profile views.
Use icon as it is.
Don’t create icon dimensional.
Corners
Use a consistent corner radius of 2px for rounded 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.
Do use squared corners when needed to reflect the real form of the metaphor.
Don’t force rounded corners if they don’t work for your metaphor.
Do square the tips of arrows.
Don’t use rounded arrow tips.
Angles
Use 45° angles for even anti-aliasing. Use 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 angles sit on the same increments.
Do use multiples of 15° or an angle that best represents the metaphor when necessary.
Don’t use 45° angles exclusively for all icons. It won’t work.