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 32 x 32 master grid to maintain consistent positioning and proportions across the IBM icon set. Please see the contribute page to contribute your pictogram to the IBM library and/or to receive design feedback.

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.

The grid contains 1px padding. This ensures pictograms will retain their desired appearance when exported. Only extend artwork into the padding for additional visual weight when necessary.

The stylistic conventions of IBM’s pictograms deliver meaningful metaphor 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.

One pictogram should not look heavier or lighter than other pictograms of the same size. Maintain the same visual weight by using a 0.72px stroke when designing all pictograms.

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

IBM Design pictograms are designed and ready to use. 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 should not 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. They are by default a solid, monochromatic color but may be treated in four distinct styles: black or white, monochromatic color, tinted or shaded color, and gradient. 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 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 1 to 2 steps down from the background color. Be sure to follow color contrast rules for pictogram strokes so the original metaphor can communicate 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. Do not blend between colors that are more than two steps away from each other. For more information on color, see the gradient section on IBM Design Color Usage.

Expressive pictograms have two elements where color is applied—the productive strokes and the color gradient. Create each expressive pictogram for use on both light and dark backgrounds to ensure sufficient contrast for color applications. Limit productive strokes to white for dark theme, and black for light theme.

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.