UI icons
As visual symbols, IBM user interface (UI) 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 used as the foundation to determine line thickness, proportion, shape and positioning across the entire set of icons. To ensure a unified approach, the grid helps guide design decisions and 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’re trying to achieve during creation.
Align design elements to the pixel grid.
Avoid random decimal points in the x and y coordinates.
Place arrow points on the grid.
Avoid placing arrow points off the grid.
Place at least one point of the angled stroke caps on the grid, if possible.
Avoid placing all angled stroke caps off the grid.
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.
The icon should remain inside the padding.
Avoid placing part of the icon in the padding area.
Place the icon against the padding if additional space is needed.
Don’t crowd the design elements—make sure there’s enough space between them.
Key shapes
Key shapes give you consistent sizes for basic shapes or proportions across the icon set. These key lines 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.
Use the key shapes that best demonstrate the proportion of the metaphor.
Don’t use key shapes that don’t reflect the real form of the metaphor.
Extend content beyond the key shapes for proper form if needed.
Don’t force the content to fit inside the key shapes.
Style
The stylistic conventions of IBM icons create a meaningful bond with our typeface, IBM Plex®. Each icon shares distinct details and characteristics with the letterforms. The following video demonstrates some of these relationships.
Rounded exteriors with 90° interiors
Distinctive point on tips
Slab characteristics
Square caps
Strokes
All icons of the same size should have a consistent visual weight; no icon should appear heavier or lighter than another. A single icon shouldn’t contain a mix of different stroke weights. Use a 2px stroke for all icons to maintain uniformity. Exceptions may be made only for more complex icons or those with unusually dense line work.
Be consistent and use 2px stoke weights.
Don’t use inconsistent stroke weights. They’ll feel unbalanced and look like a mistake.
Perspective
When creating a new icon for the library, avoid dimensional or perspective-based representations. Use objective angles, such as straight-on or profile views to ensure consistency.
Use a straight-on angle for the icon.
Don’t create a dimensional icon.
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.
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.
Use square arrow tips.
Don’t use rounded arrow tips.
Angles
Use 45° angles for even anti-aliasing. Use increments of 15° whenever possible for other needed angles 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.
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.