Cynosure Design System

Icon Guidelines

How to use the Cynosure Lutronic icon set in UI.

Icon Guidelines

Browse the set on Icons. Icons are monochrome SVGs intended to inherit color from text/CSS.

Usage

  • Prefer icons from the Foundations library (or shared CTA partials such as cta-icon, arrow-up-right) — don’t invent one-off marks for common actions.
  • Size with Tailwind (size-4, size-5, size-6, …) to match adjacent type and tap targets.
  • Color via text-* / fill-* / stroke-* tokens (text-text-primary, text-text-accent, text-text-inverse on dark bands). Avoid hard-coded orange/hex fills in new work.
  • Keep icons aligned to the optical middle of their label; use the button gallery for CTA icon treatments.

Accessibility

  • Decorative icons next to visible text: aria-hidden="true".
  • Icon-only controls need an accessible name (aria-label or visually hidden text).
  • Don’t rely on icon shape alone for critical meaning — pair with a label where space allows.

Don’ts

  • Don’t recolor icons to arbitrary brand-off hues.
  • Don’t stretch icons non-uniformly.
  • Don’t mix stroke weights from different icon generations in the same toolbar.

Download: use the Icons page zip when available (/icons.zip), or copy SVGs from /api/assets/icons/.