Iconography

Google Material Symbols, Rounded weight 300, shipped one module per icon.

The set

Clinia's utility icons are Google Material Symbols in Rounded style and with a weight of 300 (thinner than default).

Each cell renders the same icon at 24px, 20px and 16px for comparison. You can click one to copy its import code.

These are the icons Clinia ships today. Any glyph in the Material Symbols catalogue can join them, so browse it to search for a currently unsupported icon and ask for it using the current process.

Material Symbols is the only icon set in apps. Marketing surfaces may also use a fixed list of IBM Carbon icons, approved on Marketing icons. Those overrides never ship to an app.

Using an icon

Import the module for the icon you need:

tsx

import { CheckIcon } from "@/components/ui/icons/check"
 
<CheckIcon />

Sizes are 16, 20 and 24. The default is 20. Set another with size, or with a Tailwind size utility when the surrounding layout already speaks in classes:

tsx

<CheckIcon size={16} />
<CheckIcon className="size-6" />

An icon with no label is decorative and stays out of the accessibility tree. That is the right default: most icons sit next to text that already names the thing. Pass label only when the icon carries the meaning on its own, such as an icon-only button.

tsx

<CloseIcon label="Close dialog" />

Colour

Every icon draws in currentColor, so it inherits from whatever it sits in. Colour it by colouring the text.

An icon is a non-text element: it needs 3:1 against its background, not 4.5:1. That makes Trust allowed on icons through text-accent, where it is not allowed on label-size text. Leave icons in the text colour by default, and keep Trust for the selected or emphasized state. Accessibility lists the surfaces Trust clears 3:1 on.

Iconography

The set

Requested (Alarm System)

Requested (Developer docs)

Requested (Concord)

Requested (Help centre)

Requested (CCE benchmarks)

Requested (Console)

Using an icon

Colour