Iconography

Icons help coaches scan, not decode. Use them next to a label wherever there is room, and keep them simple and consistent.

Common icons

• Clientsusers
• Workoutsdumbbell
• Nutritionutensils
• Sessionscalendar
• Messagesmessage-square
• Streakflame
• Searchsearch
• Exercise videoplay

Sizes

Icons sit on the 4px unit and pair with a text size. Sizing tokens are not in tokens.json yet (QUESTIONS Q5); these are the defaults.

• Workoutssize-3 · 12pxInside small badges
• Workoutssize-4 · 16pxDefault in buttons, inputs, menus
• Workoutssize-5 · 20pxNavigation, larger buttons
• Workoutssize-6 · 24pxEmpty states, section headers

Color: always currentColor

Icons take the color of the text next to them, so they follow every theme and state automatically. Never give an icon its own fill.

<Button variant="outline">
  <Calendar aria-hidden /> Schedule session
</Button>

coach-admin already uses currentColor in 229 places; 54 icon files still hard-code colors and are switched during migration.

Stroke

Keep lucide's default 2px stroke at every size. Don't mix outlined and filled icons in one view.

Accessibility

• An icon next to a label is decorative: give it aria-hidden.
• An icon-only button needs an accessible name: aria-label="Delete workout", plus a tooltip for sighted users.
• The button around a 16px icon is still at least 24×24px.

Mirroring in RTL

Icons that show direction or movement mirror in RTL; everything else stays as drawn. Switch the direction in the header to see it.

• Next, forwardMirrors
• BackMirrors
• Open a row, breadcrumb separatorMirrors
• Play a video: media controls keep their directionDoes not mirror
• Search, and other icons with no directionDoes not mirror

Related: RTL, Accessibility.