Icons

Mobile Support: Full

A visual representation of a command, device, directory, or common action.

On this page

Import
Usage guidelines
Icon Directory
Sizes
Colors
Alignment with text
Custom Icons
- Caveats with using custom icons
Figma Library

Import

import { Pdf } from "@vitality-ds/icons";

<Pdf />

Usage guidelines

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.

Icon Directory

Search below to explore the icons library. You can click an icon to copy is component name to the clipboard.

Sizes

Icons can either inherit the font size of their parent, or have a size set explicitly.

<AdminNote size="sm" />
<AdminNote size="md" />
<AdminNote size="lg"  />
<Typography variant="sectionTitle" >
  Frida Johnson
  <AdminNote size="inherit" />
</Typography>

Colors

Icons can either inherit the colour of their parent, or have a colour set explicitly.

<Stack>
  <AdminNote color="primary" />
  <AdminNote color="hiContrast" />
  <AdminNote color="lowContrast" />
  <AdminNote color="disabled" />
  <AdminNote color="success" />
  <AdminNote color="critical" />
  <AdminNote color="warning" />
  <AdminNote color="info" />
  <AdminNote color="accent" />
  <AdminNote color="moderate" />
  <Typography variant="pageTitle" color="success">
    Frida Johnson <AdminNote size="inherit" color="inherit" />
  </Typography>
</Stack>

Alignment with text

When used inline with text, the icon will have a negative margin in em units applied.

<Stack>
  <Typography variant="sectionTitle">
    <AdminNote size="inherit" /> Patient Appointments
  </Typography>
  <Typography>
    <AdminNote size="inherit" /> Patient Details
  </Typography>
</Stack>

Custom Icons

Although it is discouraged, you can create your own icons that have access to the same properties as the Vitality icons. Do this by importing the IconPrimitive component:

import IconPrimitive from "@vitality-ds/icons";

You can then pass any svg path data as children to the component:

<IconPrimitive color="warning">
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M11.3198 2.73501C9.5612 4.70442 5 10.2799 5 15.1313C5 18.9248 8.134 22 12 22C15.866 22 19 18.9248 19 15.1313C19 10.2799 14.4388 4.70442 12.6802 2.73501C12.2602 2.26466 12 2 12 2C12 2 11.7398 2.26466 11.3198 2.73501ZM11.5142 5.55126C10.258 7.02831 7 11.2099 7 14.8485C7 17.6936 9.23857 20 12 20C14.7614 20 17 17.6936 17 14.8485C17 11.2099 13.742 7.02831 12.4858 5.55126C12.1858 5.1985 12 5 12 5C12 5 11.8142 5.1985 11.5142 5.55126Z"
  />
</IconPrimitive>

Caveats with using custom icons

The IconPrimitive component expects all <path> data to be based on a 24x24 pixel SVG size. Incorrect sizes will result in odd cropping or distorted path data.
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.

<IconPrimitive color="info" size="lg" title="AB Positive Blood Type">
  <path
    d="M10.1939 2.76731C11.1783 1.74423 12.8217 1.74423 13.8061 2.76731L14.0699 3.04155H16.6651C17.9515 3.04155 19 4.07845 19 5.36445V7.75H18V5.36445C18 4.63692 17.4055 4.04155 16.6651 4.04155H13.8572C13.7212 4.04155 13.5911 3.98619 13.4969 3.88823L13.0855 3.46067C12.4945 2.84645 11.5055 2.84645 10.9145 3.46067L10.5031 3.88823C10.4089 3.98619 10.2788 4.04155 10.1428 4.04155H7.5C6.66845 4.04155 6 4.71035 6 5.52845V14.4854C6.65085 14.4749 7.2663 14.4937 7.85025 14.5153C7.93945 14.5185 8.0278 14.5219 8.1153 14.5253C8.75695 14.5496 9.3555 14.5722 9.9409 14.5597C11.2544 14.5318 12.462 14.3269 13.7459 13.5694C15.3052 12.6494 16.625 12.9257 17.5374 13.4566C17.7067 13.5552 17.8611 13.6617 18 13.7694V11.25H19V16.5131C19 17.8897 17.8776 19 16.5 19H15V20H12.5V22H11.5V20H9V19H7.5C6.1224 19 5 17.8896 5 16.5131V5.52845C5 4.15188 6.1224 3.04155 7.5 3.04155H9.9301L10.1939 2.76731Z"
    fill="#333333"
  />
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M9.7081 7.29955C9.62845 7.11755 9.44865 7 9.25 7C9.05135 7 8.87155 7.11755 8.7919 7.29955L7.4838 10.2895C7.48065 10.2963 7.47765 10.3032 7.4748 10.3101L7.0419 11.2996C6.93125 11.5526 7.0466 11.8473 7.2996 11.958C7.5526 12.0687 7.8474 11.9534 7.9581 11.7004L8.2645 11H10.2355L10.5419 11.7004C10.6526 11.9534 10.9474 12.0687 11.2004 11.958C11.4534 11.8473 11.5688 11.5526 11.4581 11.2996L11.0252 10.3101C11.0223 10.3032 11.0194 10.2963 11.0162 10.2895L9.7081 7.29955ZM9.25 8.7474L9.798 10H8.702L9.25 8.7474Z"
  />
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M12 7.5C12 7.22385 12.2239 7 12.5 7H14.0625C14.8863 7 15.5 7.70245 15.5 8.5C15.5 8.87555 15.3639 9.23 15.1339 9.5C15.3639 9.76995 15.5 10.1244 15.5 10.5C15.5 11.2975 14.8863 12 14.0625 12H12.5C12.3674 12 12.2402 11.9473 12.1465 11.8535C12.0527 11.7597 12 11.6326 12 11.5V7.5ZM14.0625 9C14.2742 9 14.5 8.807 14.5 8.5C14.5 8.19295 14.2742 8 14.0625 8H13V9H14.0625ZM14.5 10.5C14.5 10.807 14.2742 11 14.0625 11H13V10H14.0625C14.2742 10 14.5 10.193 14.5 10.5Z"
  />
  <path d="M17 9C16.7239 9 16.5 9.22385 16.5 9.5C16.5 9.7761 16.7239 10 17 10H18.5C18.7761 10 19 9.7761 19 9.5C19 9.22385 18.7761 9 18.5 9H17Z" />
</IconPrimitive>