Skip to main contentCarbon Design System

Icons

Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.

Resources



Designing with icons

Sizing

Carbon components typically use icons on 16px artboards. Icons on 20px, 24px, and 32px artboards can also be used within the UI. Be sure icon size is consistent throughout your product.

icon sizingicon alignment

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.

proper sizing

Do use the correct icon size with IBM Plex.

improper sizing

Don’t alter the icon-text size ratio.

Touch targets

All touch targets for interactive icons need to be 44px or larger. Developers can add padding to a touch target with CSS to meet the 44px requirement.

touch target padding

The menu button that is also a touch target may have a 20px ✕ 20px icon centered in a 48px ✕ 48px button.

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 the Color guidelines.

It’s also important to note that Carbon v10 icons themselves do not have interaction states, only their backgrounds do.

proper alignment

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

improper alignment

Don’t use different colors for text and icons.

Alignment

When used next to text, icons should be center-aligned.

proper alignment

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

improper alignment

Don’t baseline-align icons to the text.