Icons

Two icon vocabularies live in Lumen, and the line between them is what each is for.

Domain glyphs — the set below. Conditions, medications, specialties, diagnostics, blood, body, family. Drawn for this product because no general-purpose library covers them: there is no lucide icon for cervical cancer or oral contraception.

UI chrome — lucide, used throughout the components on this site for chevrons, checks and close buttons. Reach for it when the icon is about the interface rather than the body.

Browse

Click any icon to copy its name.

Using them

import { HealthIcon } from 'lumen-icons/react';

<HealthIcon name="body/heart" variant="outline" size={20} />

Colour comes from currentColor — the component never sets fill, so an icon takes the text colour of wherever it sits and follows Day/Night without a prop:

<span className="text-primary">
  <HealthIcon name="conditions/headache" />
</span>

Icons are decorative by default (aria-hidden), which is right whenever adjacent text already says what they mean. Pass label when the icon stands alone:

<HealthIcon name="conditions/headache" label="Headache" />

Weights

filled is solid ink, outline is stroked, and negative is an ink block with the glyph knocked out — for placing on a coloured ground.

Without React

The raw SVGs ship at lumen-icons/svg/<weight>/<category>/<name>.svg for consumers with an SVG loader. Use iconPath() rather than writing that string by hand — a typo in a path fails at runtime, where an IconName fails at compile time:

import { iconPath } from 'lumen-icons';

iconPath('body/heart', 'filled'); // "svg/filled/body/heart.svg"