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. Be sure to use icons at their originally produced size. These icons are provided in SVG format or can be used directly from the Figma, Carbon and IBM Design Language libraries.
| 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.
Use the correct icon size with IBM Plex®.
Don’t alter icon sizes.
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 should be 44px or greater. The icon can be smaller than 44px if padding is added to the touch target with cascading style sheets (CSS) to meet the 44px minimum.
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 must 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 about color, see Color in UI.
Match your icon color with your text color when pairing them.
Don’t use different colors for text and icons.
Make icons monotone.
Don’t use more than one color within an icon.
Third-party UI icons
Third-party UI icons require permission from that third party before the icon can be used and added to our libraries. Requestors are responsible for securing permission. These icons may come in various styles and formats and must not be visually altered. However, they should be visually balanced with existing IBM UI icons to ensure consistency within interfaces.
Alignment
While most third-party icons don’t align perfectly to the icon grid, it’s important to align any icon artwork to the grid as best as possible. Center and align edges to grid divisions while respecting icon padding guidelines.
Optically center icons and align them to the icon grid as best as possible.
Don’t left align, right align, top align or bottom align logos.
Use the padding for optical centering.
Don’t place logos in the padding unless absolutely necessary.
UI icons in action
