Icons drawn in the same language as Direction B's: single-weight stroke, rounded caps, monochrome, inheriting the button's own colour so they work on every ground without a second rule. 18px against a 16px label is the optical match — 16px reads small beside caps-height letters and 20px starts to compete with the word.
Two things to decide, and they are separate. First, whether icons appear at all. Second, which kind: a leading subject icon says what the thing is, a trailing arrow says where you are going. Boards 1 and 2 are those two answers; board 4 says the choice depends on the role, which is the argument this sheet is really making.
The cost, stated once. The mockup brief allows Direction B eleven icons and it is already at nineteen after the assessment field. Button icons are arguably interface affordances rather than library iconography — the same argument that lets an arrow or a chevron off the count — but that reading is Rian's to accept, not ours to assume.
The live system. The baseline is not a weak option — the labels are already long and explicit, and a button whose words say exactly what happens does not need a picture to say it again.
A calendar on the consultation, a clipboard on the assessment, a magnifier on the exposure check. A leading icon says what the thing IS, which is the honest job for one here: booking, assessing and searching are three different actions and the marks tell them apart before the words are read. The cost is width, on labels that are already the widest thing in their rows.
An arrow says where you are going, not what the thing is — it is a direction, not a subject. On all three it reads as a consistent system, but it also says the same thing three times and adds nothing a button did not already imply.
Nothing until the pointer arrives, then the arrow slides out as the fill sweeps in. The two motions are the same gesture, so it costs no extra idea. At rest the buttons are as clean as board 0. It animates width on a tiny element rather than a layout container, and it is pinned open under prefers-reduced-motion, but it is invisible to touch users entirely.
The roles already differ, so the icons should too. Main and Secondary are things you DO, and take a subject icon; Outline is somewhere you GO, and takes the arrow. It is the only board where the icon carries information the colour does not already carry.
Full-size buttons stay bare; the header and mega-menu buttons take an icon. The header is where a mark actually earns its place — it is scanned, not read, and the two buttons sit side by side with nothing else to tell them apart. Everywhere else the label has room to do the work.
Measured at the system's own size. A leading icon adds 29px — 18px for the mark and 11px of gap.
| Label | No icon | With one icon | Note |
|---|---|---|---|
| Book a Consultation | 214px | 243px | Comfortable |
| Take the Business Legal Health Assessment | 395px | 424px | Already the widest thing on the page. On a 375px phone it wraps either way; the icon then sits beside a two-line label, which is why the button is centre-aligned rather than top-aligned |
| Find Out Where Your Business Is Exposed | 381px | 410px | Same as above |
| Take the Assessment (short form, header) | 220px | 247px | The size where an icon costs least and helps most |
One icon per button, never two. A leading subject mark and a trailing arrow on the same button is two different sentences. Every icon is decorative and carries aria-hidden — the label already names the action, and a screen reader announcing "calendar Book a Consultation" is worse than silence. The icon inherits currentColor, so it survives every ground and every hover state without a rule of its own. And the same action takes the same icon everywhere — if the consultation gets a calendar in the header it gets one in the footer band too, or it is decoration rather than a system.