Skip to main contentIBM Design Language

UI icons

Iconography is highly functional in a user interface. When used wisely, icons become an elegant yet efficient way to communicate with and help guide a user through an experience. To maintain this functionality, it’s important to reduce cognitive load on users by employing icons sparingly and strategically throughout your designs.

Play

Sizing

Icons have been designed to work best in four sizes: 16px, 20px, 24px, and 32px. Please use icons at their originally produced size. These are provided in SVG and Adobe Illustrator files.

sizing example
Icon sizeStroke widthPaddingLive areaCorner radiusType sizes
32px2px2px28px2px—
24px1.5px1.5px21px1.5px—
20px1.25px1.25px17.5px1.25px16pt
16px1px1px14px1px14pt

16px and 20px icons are optimized to feel balanced when paired with 14pt and 16pt IBM Plex. Use 24px and 32px when larger icons are needed.

four standard icon sizes
correct icon sizing

Do use the correct icon size with IBM Plex.

incorrect icon sizing

Don’t alter icon sizes.

correct sizing alignment

Do center-align icons when they’re next to text.

incorrect sizing alignment

Don’t baseline-align icons to the text.

Alignment

Icons are optically aligned to the center of the icon grid within the boundary box. Centering ensures all icons will be aligned correctly when exported and used side-by-side in a line or a row. Visually center an icon where the visual weight is heaviest. In some situations, mechanically centering doesn’t work.

alignment exampleicons optically centered on grid

Clearance

When designing icons for touch surfaces, all targets need to be 44px or greater. The icon can be smaller than 44px if padding is added to the touch target with CSS to meet the 44px minimum.

clearance exmaple
clearance rule

Do follow the clearance rule to allow for legibility and an optimal touch experience.

incorrect clearance

Don’t collapse the icon clearance area.

Color

Icons are always a solid, monochromatic color and need to pass the same color contrast ratio as typography (4.5:1). The color of the icon should reflect the importance of the icon’s action which should always be to help guide a user. For more information on color, see Color in UI.

color match

Do match your icon color with your text color when pairing them.

incorrect color match

Don’t use different colors for text and icons.

color icon

Do make icons monotone.

incorrect color icon

Don’t use more than one color within an icon.