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