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.
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.
| Icon size | Stroke width | Padding | Live area | Corner radius | Type sizes |
|---|---|---|---|---|---|
| 32px | 2px | 2px | 28px | 2px | — |
| 24px | 1.5px | 1.5px | 21px | 1.5px | — |
| 20px | 1.25px | 1.25px | 17.5px | 1.25px | 16pt |
| 16px | 1px | 1px | 14px | 1px | 14pt |
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.
Do use the correct icon size with IBM Plex.
Don’t alter icon sizes.
Do center-align icons when they’re next to text.
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.
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.
Do follow the clearance rule to allow for legibility and an optimal touch experience.
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.
Do match your icon color with your text color when pairing them.
Don’t use different colors for text and icons.
Do make icons monotone.
Don’t use more than one color within an icon.