Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

Pictograms

IBM’s pictograms are visual symbols used to represent ideas, objects, or narratives. They can communicate messages at a glance, afford interactivity, and simplify complex ideas. They draw from details found in the Plex typeface and work well in presentations and marketing communications.

Producing a pictogram

Don’t see the pictogram you need in the library? Make your own! Follow these guidelines to ensure visual consistency and proper formatting.

  • All pictograms should be unique and not redundant with any existing pictograms in the system. Look through the pictograms in the IBM Design Sketch kit to ensure that your proposed new pictogram is not already represented.
  • All pictograms should adhere to the IBM Design Language visual style.
  • All pictograms should comply with IBM accessibility standards.
  • All pictograms should be usable across all supported platforms and devices.
  • All pictograms should be understandable by a global audience of users, regardless of nationality or language.

Producing an icon

  • Create a 32 x 32 px artboard for each pictogram.
  • 32 px pictograms should have 1 px padding.
  • Set your workspace up from the start to snap to grid.
  • Be aware of automatic alignments which can place vectors on uneven or half pixels.
  • The pictogram should be on the top-most layer in your artboard. Strokes should be grouped appropriately.
  • Make sure to properly name layers and artboards (these names will also be exported into the code).

Production-ready

  • To be considered production-ready, all pictogram submissions must be delivered in Adobe Illustrator format at 32 x 32 px with strokes kept intact.
  • Each artboard and the artwork within it must be aligned to the pixel grid wherever possible.
  • All strokes should be kept as is and not converted to shapes.
  • Group strokes logically whenever possible.

Exporting SVGs

Export SVGs from Sketch.

  1. Draw a 32 x 32 px artboard. 32 px pictograms should have 1 px padding.
  2. Place the pictogram squarely on the artboard, making sure it’s aligned to the pixel grid.
  3. Convert all strokes to outlines(Shift + ⌘ + O)
  4. Select any overlapping shapes and click the Union icon from the top navigation to merge all of the shapes together.
  5. Make sure the icon is at #000000 and has no additional styling.
  6. Select the entire artboard (not just the icon).
  7. Click Make Exportable at the bottom of the right toolbar in Sketch.
  8. In the Export widget select “SVG” in the format dropdown.
  9. Click Export ‘Artboard-Name’.
  10. Name icon with the #name—modifier convention. (ex. copy.svg, copy—glyph.svg, add.svg, add—glyph.svg).

Export SVGs from Adobe Illustrator.

  1. Draw a 32 x 32 px artboard. 32 px pictograms should have 1 px padding.
  2. Place the icon squarely on the artboard, making sure it’s aligned to the pixel grid.
  3. Expand all strokes (Object > Expand).
  4. Select all overlapping shapes and click the “Unite” icon in the Pathfinder panel to merge all of the shapes together.
  5. Make sure the icon is at #000000 and has no additional styling.
  6. Select File > Save a Copy… from the top navigation.
  7. On the Format dropdown select “SVG.”
  8. Below Format select Use Artboard, then select either all or a range of artboards, depending on your need.
  9. Click Save.
  10. The SVG Options dialog will then open.
  11. Make sure the preferences are the same as in the image below.
  12. SVG export options image
iconography contribution exportsvgfromai

Contribution process

Does your pictogram have potential for other materials at IBM? If so, please consider contributing to the design system. IBM welcomes pictogram contributions in the form of a pull request to our pictogram repository (coming soon). For now, to make a pull request, please submit an issue in the repo with the pictogram attached.

Please note that Carbon contribution is not required in order to introduce a new pictogram into your materials. If your pictogram is determined to be broadly useful in Carbon and passes IBM Brand design reviews, then it may also be integrated into the design system.

If your submission is accepted, the team will notify you. If changes are needed, you’ll need to create a new contribution issue after reworking it based on feedback from the Design System and Brand teams.