What IBM does
IBM's Carbon Design System says components typically use icons on 16 px artboards, with 20, 24 and 32 px also allowed; 16 and 20 px icons are tuned to pair with 14 and 16 px IBM Plex, and size should stay consistent across a product. Icons are a solid, monochromatic color, must meet 4.5:1 contrast like text, match the text color when paired, and are center-aligned to text, not baseline-aligned. Interactive icons need a touch target of 44 px or more, for example a 22 px icon centered in a 48 px target. The published SVGs are single filled paths on a 32 unit viewBox; the search glyph's ring runs from radius 9 to about 11, a 2 unit line, with sharp corners and a square-cut handle, and state variants such as checkmark--filled sit beside the outlines.
IBM's system, as published
- Artboards
- 16 px default; 20, 24, 32 px
- Type Pairing
- 16 and 20 px icons with 14 and 16 px IBM Plex
- Color
- solid monochrome, same as paired text
- Contrast
- 4.5:1
- Alignment
- center to text, never baseline
- Touch Target
- 44 px minimum (22 px icon in 48 px target)
- Svg Construction
- filled paths, viewBox 0 0 32 32
- Line Thickness
- 2 units on 32 (search ring, radius 9 to ~11)
- Variants
- outline plus --filled
Why it works
Fixing icon size to the text size and icon color to the text color removes most icon decisions. Holding icons to the same contrast as type keeps them readable.
Best for
Enterprise software, data and admin tools, accessible UI, regulated industries that need contrast rules written down
What breaks it
- Two-tone or gradient icons
- Icons that fail 4.5:1 contrast
- Icon sizes that change from section to section
- Baseline-aligning icons to text
Sources
- carbondesignsystem.com: Carbon icon guidelines: sizes, type pairing, color, contrast, alignment, touch targets
- carbondesignsystem.com: Carbon icon library listing outline and filled variants
- unpkg.com: Published search glyph: one filled path on a 32 unit viewBox
Steal it for your brand
The same system, written in your colors, type and shapes. Nothing of IBM's look comes with it.
The recipe
- Pick one icon size for the whole piece: the body text size (
params.base pxpx) times 1.15, so 14 px text gets 16 px icons; round to a whole pixel and keep it everywhere. - Restyle an open set to solid single-color shapes with sharp corners, square-cut ends and one line thickness of
typography.body.weight/ 200 units on a 32 unit canvas (2 units for regular text). - Color each icon the same as the text it labels:
palette.inkbeside body text,palette.ink mutedbeside secondary text; check 4.5:1 againstpalette.paper. - Center icons vertically on the text line; do not sit them on the baseline.
- Wrap any clickable icon in a target of at least 44 px with padding, leaving the icon size unchanged.
- Use the filled variant for a selected or completed state rather than a new color.
What you'll need
- Body text size
- Which icons are clickable
Recipe as JSON
{
"recipe": {
"icon_to_body_ratio": 1.15,
"icon_px": "{params.base_px} * 1.15",
"canvas_units": 32,
"stroke_units_at_32": "{typography.body.weight} / 200",
"color": "{palette.ink}",
"color_secondary": "{palette.ink_muted}",
"min_contrast": 4.5,
"align": "center",
"touch_target_px": 44,
"corner_radius_units": 0,
"linecap": "butt",
"selected_variant": "filled"
},
"fallbacks": {
"palette.ink_muted": "{palette.ink}"
},
"steps": [
"Pick one icon size for the whole piece: the body text size ({params.base_px} px) times 1.15, so 14 px text gets 16 px icons; round to a whole pixel and keep it everywhere.",
"Restyle an open set to solid single-color shapes with sharp corners, square-cut ends and one line thickness of {typography.body.weight} / 200 units on a 32 unit canvas (2 units for regular text).",
"Color each icon the same as the text it labels: {palette.ink} beside body text, {palette.ink_muted} beside secondary text; check 4.5:1 against {palette.paper}.",
"Center icons vertically on the text line; do not sit them on the baseline.",
"Wrap any clickable icon in a target of at least 44 px with padding, leaving the icon size unchanged.",
"Use the filled variant for a selected or completed state rather than a new color."
]
}See it working
- IBM: The sizing, color and alignment figures, including the touch-target example
The lesson
Make icons one flat color, size them to the type beside them, and give them the same contrast rules as text.
The move
Each cell on a six-column grid has a label at the top left, like "AI Label" or "Business metrics", and a small black icon beneath it. The icons are all one color and one line weight, from the boxed "AI" mark to the chat bubble and magnifier-with-code symbols, with no shading or second color.
Why it works
- Our readSingle-color, single-weight glyphs make a large AI-related set look like one family, even when the ideas vary a lot.
- Our readLabeling each cell with its name keeps the grid usable as a lookup: the meaning is read, not guessed.
- Vendor claimCarbon asks for solid monochrome icons that meet 4.5:1 contrast like text, 16 px by default, and center-aligned to adjacent text. (source)
What not to copy
Don't copy IBM's specific glyphs or product names. Keep the rules: set one icon size per product, color it like the text beside it, check its contrast, and center it on the text line.
