Vitality uses lucide-react as its icon library. Import any icon directly from lucide-react by its component name:

import { Paperclip } from "lucide-react";

<Paperclip />

Icons should be used to provide clarity. They can help users find their way through an interface, make the meaning of buttons clearer and prepare users for what is happening next. Use icons to help users comprehend an action, command or section by providing a supporting graphical representation.

Below is a reference of common use cases and their recommended Lucide icon. Use the search to filter by use case name or Lucide icon name.

The size prop accepts a number (pixels) or any valid CSS length string. To match the surrounding text size, use size="1em".

<NotepadText size={"0.875rem"} />
<NotepadText size={"1rem"} />
<NotepadText size={"1.5rem"} />
<Typography variant="sectionTitle">
  Frida Johnson
  <NotepadText size="1em" />
</Typography>

Lucide icons render using stroke="currentColor" by default, meaning they inherit the CSS color of their parent. To apply a specific colour, either set it on a wrapping element or pass it directly via the color prop using a CSS color value.

<Stack>
  <div style={{ color: "var(--vitality-colors-primary9)" }}>
    <NotepadText color="currentColor" />
  </div>
  <div style={{ color: "var(--vitality-colors-neutral12)" }}>
    <NotepadText color="currentColor" />
  </div>
  <div style={{ color: "var(--vitality-colors-neutral11)" }}>
    <NotepadText color="currentColor" />
  </div>
  <Typography variant="pageTitle" color="success">
    Frida Johnson <NotepadText size="1em" color="currentColor" />
  </Typography>
</Stack>

When placed inside a Typography component, Lucide icons are automatically aligned to the text baseline.

<Stack>
  <Typography variant="sectionTitle">
    <Calendar1 /> Patient Appointments
  </Typography>
  <Typography>
    <NotepadText size="0.875rem" /> Patient Details
  </Typography>
</Stack>

For use cases with no suitable Lucide equivalent, you can create a compatible custom icon using createLucideIcon. This gives the icon the same API as any Lucide icon — size, color, strokeWidth, etc.

import { createLucideIcon } from "lucide-react";

const MyCustomIcon = createLucideIcon("MyCustomIcon", [
  [
    "path",
    {
      d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z",
    },
  ],
]);

1. Custom icons expect all <path> data to be based on a 24x24 pixel viewBox. Incorrect sizes will result in odd cropping or distorted path data.
2. Colors only affect the <path> HTML element; so <rect>, <ellipse> etc will not work. In some cases you may be able to "flatten" these shapes in a design tool like Figma, resulting in their SVG data rendering <path> elements instead.
3. Icons must be stroke-based, not filled. Lucide icons use stroke="currentColor" by default, which is what enables colour theming. Fill-based icons will not respond to colour props. If your SVG source uses fills, convert the icon to strokes in your design tool before exporting.