Styles

Icons

The Single Record icon set, and the size and colour rules that keep it legible in dense clinical screens.

The set

Single Record uses Lucide, an open-source icon set published under the ISC licence. Every icon is drawn on a 24 by 24 grid with a 1px stroke, round caps and round joins, so icons sit together evenly whatever the mix on screen.

142 icons are published, grouped into 11 domains that follow how clinical and administrative staff talk about their work: navigation, actions, status, people, clinical records, scheduling, location, communication, files, data and device.

One glyph carries one meaning. A drawing is never reused for two different concepts, because the person reading the screen sees the picture, not the name behind it. The build fails if two Single Record names ever resolve to the same Lucide drawing.

Icons are referenced by their Single Record name, such as clinical/medication, not by the underlying Lucide file name. The Single Record name is stable: if an upstream drawing is renamed or replaced, the name your product uses does not change.

Using an icon

An icon is a sr-icon wrapper around an inline SVG. The wrapper carries the size and the colour role; the SVG itself is drawn with currentColor and inherits from it.

<!-- Decorative: the visible text carries the meaning. -->
<span class="sr-icon sr-icon--md sr-icon--default">
  <svg aria-hidden="true" focusable="false"><!-- clinical/vitals --></svg>
</span>
<span>Observations</span>

Sizes

Four sizes are published. Stroke stays at 1px in all of them — it is not thinned at small sizes or thickened at large ones. One stroke weight across the set is what makes a row of mixed icons look like one family.

An icon that is itself a control needs a target of at least 44 by 44px. Keep the icon at its published size and add padding to the button around it, rather than scaling the drawing up.

Colour

Icons take their colour from a role, not from a value. Roles map onto the same semantic colour tokens the rest of the interface uses, so an icon shifts with the theme without being re-specified.

Inside a component that already sets a colour, such as a button, use sr-icon--inherit so the icon tracks the component rather than fighting it.

On each platform

Sizes, stroke and the colour roles are published as design tokens from a single source, so the same size is the same number wherever you build. Reach for the token rather than typing 24px.

MAUI receives the icons as XAML path geometry rather than images, so an icon takes its colour from a token like everything else and stays sharp at any density. SrIconStroke is a Double, ready to bind to a Path's StrokeThickness.

Icons with text

Most icons in Single Record sit next to a label. In that pairing the text carries the meaning and the icon is decorative, so it is hidden from screen readers. When an icon stands alone, the control around it must be named instead.

<!-- Decorative. Paired with visible text, so the icon is hidden from
     assistive technology and the text is announced on its own. -->
<button class="sr-button sr-button--secondary" type="button">
  <span class="sr-icon sr-icon--sm sr-icon--inherit"><svg aria-hidden="true" focusable="false"></svg></span>
  Print summary
</button>

<!-- Meaningful. No visible text, so the control carries the name. -->
<button class="sr-button sr-button--secondary" type="button" aria-label="Print summary">
  <span class="sr-icon sr-icon--sm sr-icon--inherit"><svg aria-hidden="true" focusable="false"></svg></span>
</button>

Status icons

Clinical status must never be carried by colour or by icon shape alone. Every status icon needs a text label next to it. Staff working at speed, on varied screens, in varied light, read the label.

<!-- Correct: colour and icon reinforce a label that already says it. -->
<p>
  <span class="sr-icon sr-icon--sm sr-icon--critical"><svg aria-hidden="true" focusable="false"></svg></span>
  Allergy: penicillin
</p>

<!-- Wrong: a bare red icon leaves the meaning to colour and shape alone. -->
<span class="sr-icon sr-icon--sm sr-icon--critical"><svg aria-hidden="true"></svg></span>

When not to use an icon

• In dense data views, where a decorative icon in every row adds noise and no meaning.
• As the only signal for a state, an action, or a piece of clinical information.
• To replace a word that is short and unambiguous. A labelled control is faster to read than an icon a member of staff has to learn.
• Alongside icons from another set. Mixing sets breaks the shared stroke and grid, and the result reads as two different products.

Do not redraw or edit the SVG paths, and do not rotate an icon to mean something new. If the set does not cover what you need, request the icon rather than improvising one.

Browse the set

Select an icon to copy its name.

Accessibility requirements