Icons
Almost all of them are IBM Carbon. These are the ones that are not, and the ones whose name will mislead you.
See it
Icons where they live: at the start of a button when they carry meaning, at the end when they point the way, in a field, in a badge, and alone in a button that then carries its name in aria-label.
Choosing an icon
Carbon first, by name: the set is IBM Carbon, Apache 2.0, around 2,700 glyphs at 16, 20, 24 and 32. Do not draw one that looks close enough — a hand-drawn lookalike is a shape nobody can find again by name, and two libraries on one surface read as two weights of line. Never an emoji as an icon: it renders in the platform’s own set, in colour, at a size nothing else on the surface shares.
An icon earns its place by carrying what the label cannot on its own: a plus for creating, a bin for deleting, a calendar on a date field. Beside a label it goes at the start; when it points where the action goes — next, open, external — it goes at the end. Outline is the default and the filled variant marks the active or selected state, as UserVerified and UserVerifiedOutline do, so a state never needs a second asset, only a second glyph.
| Size | Where |
|---|---|
| 16 | beside body text, in a small button, in a badge |
| 20 | in a field, a menu row, a medium or large button |
| 24 | in a header, a navigation rail, an icon-only button |
| 32 | an empty state, a feature mark |
Drawn here
Fifteen icons do not exist in Carbon. Assuming one of them is Carbon produces an import that resolves to nothing, or worse, to something plausible that is quietly the wrong shape. They ship with the system, drawn on Carbon’s grid and at its weight, so they sit beside a Carbon glyph as one set.
Gaps in the set
A chevron small enough for a dense row, a sparkle, a heading mark. General shapes Carbon happens not to carry at this weight.
From the domain
A waiting room, an availability grid, a clinician. No general-purpose icon set was ever going to have these — they exist because the product they were drawn for needed them.
Eight that Carbon has under another name
These are the ones that cost time. The name in the design file is not the name in the package, so the import fails or lands on the wrong icon.
| In the design | In Carbon |
|---|---|
| notifications | Notification |
| direction--right--01 | DirectionRight_01 |
| list--task | TaskComplete |
| close--panel | SidePanelClose |
| collapse | CollapseAll |
| private | PrivateNetwork |
| calendar--day | Calendar |
| rotate--360 | Rotate |
Using them
Every icon paints with currentColor, so it takes the colour of the text beside it without being told, and its states — hover, selected, disabled — come from that colour and never from a second file. size renders it square; the set is drawn at 16 and scales from there. The gap to a label is 8px at every size, and a glyph that is not symmetrical — a play triangle, an arrow — is nudged by eye rather than centred by the box, because geometric centring is what makes it look off.
Accessibility
Every icon is aria-hidden and not focusable by default. An icon beside a label repeats it; an icon on its own needs the button or link around it to carry the name, and the name says the action — Add attachment, not plus. An icon that carries a state a screen reader would otherwise miss — a verified user — is announced by the text beside it, not by the glyph.
An icon is non-text and needs 3:1 against its surface. The secondary and tertiary colours icons usually take are measured in the margin on a card, in both modes; an icon in a colour under that line is decoration and says nothing on its own.UserVerified is the one two-colour icon. Its badge and tick are bound to interactive/accent and interactive/on-accent rather than baked in, so it follows the theme like everything else, at the label ratio measured on the Button page.