Pictograms

IBM pictograms are offered in two different types: productive and expressive. The standard productive pictograms feature simple linework and are the go-to pictogram type for most contexts, while the more dynamic expressive pictograms work best for select use cases where more visual impact is needed. Both types share much of the same design guidance with the exception of stroke specifications and color application.

Draw pictograms on the 32px x 32px master grid to maintain consistent positioning and proportions across the IBM icon set. See the Contribute page to add your pictogram to the IBM library and also receive design feedback.

Pictograms are drawn on a 32px x 32px base grid. Use the grid lines as your basic guideline to snap the stroked line work of your design elements. We recommend making adjustments along the way to ensure the right amount of details that work at every size.

When designing an icon, maintain a minimum exterior padding of 1px. The starter file grid includes this padding by default, ensuring pictograms retain their intended appearance when exported. Extend artwork into the padding only if additional visual weight is needed.

The stylistic conventions of IBM’s pictograms deliver meaningful metaphors through simple line art. Each symbol is intentionally designed to harmoniously pair with IBM Plex®. The juxtaposition of smooth curves and sharp angles is central to IBM Design. Pictograms follow the same principles as UI icons: they feature rounded exteriors with 90° interior angles, and often include slab-like qualities with square stroke caps. Rounded caps may be used when they better represent clear metaphors or familiar objects.

Pictograms are drawn on a 32px x 32px base grid. Use the the grid lines as your basic guideline to snap the stroked line work of your design elements. We recommend making adjustments along the way to make sure to have the right amount of details that work at every size.

Expressive strokes differ from productive strokes by stroke weight and gradient use. When making a productive pictogram into an expressive pictogram, productive strokes remain at 0.72px, while expressive strokes increase to 1.44px.

Never distort pictograms and be sure to avoid dimensional representations. Use more objective vantage points that are straight-on or profile views.

Use the default rounded corner setting for all shapes and 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 pictogram’s metaphor clear. Use an additional radius to make the metaphor reflect the real form of the object.

Use 45° angles for even anti-aliasing whenever that angle is logical or use increments of 15° for all other angles. You can create harmony across the pictogram set by making angles sit on the same increments.

Pictograms are more illustrative than UI icons but shouldn’t be overly detailed. Communicate your ideas with only the most essential elements. Avoid using perspective and unnecessary visual metaphors.

Pictograms are illustrative and can be used at larger scales, therefore, a wider variety of visual styles are acceptable. TBy default, they are a solid, monochromatic color but may be used in four distinct styles: black or white, a monochromatic color, a tinted or shaded color, and a gradient. To achieve luminosity, use background color values of 70–100. Regardless of style, pictograms need to pass the same color contrast ratio as typography (4.5:1). For more information on color, see IBM Design Color Usage.

Adding color by tinting or shading your pictograms can give a deeper feeling of expression and tonality. One-color to three-color families can be used when coloring pictograms, though single-color families are recommended. On light backgrounds (white or value 10) use tints 1 to 2 steps up from the background color to fill in pictograms. On dark backgrounds (black or value 100) use shades one to two steps down from the background color. Be sure to follow color contrast rules for pictogram strokes so the original metaphor can be communicated properly.

Use combinations within any of the acceptable 2-color families when blending gradients. Values between 30 and 60 are used to create vibrant gradients that work well against both dark and light backgrounds. For more contrast or subtlety, blend between darker or lighter colors. Don’t blend between colors that are more than two steps away from each other. For more information on color, see the Gradients section on IBM Design Color Usage.

Expressive pictograms apply color in two areas: the productive strokes and the color gradient. To ensure sufficient contrast, each pictogram is designed for both light and dark backgrounds. White productive strokes are used for dark backgrounds and black strokes for light ones. The master file includes six dark mode and six light mode gradients, which are prebuilt into all approved expressive pictograms.

The color gradient provides color to the gradient strokes of the expressive pictogram. Use the same color gradient guidance as you would for a productive pictogram. This layer remains stationary on the icon grid at 45º and is masked by the gradient strokes for consistent color across each pictogram.