Icons

Pit Viper’s icons are used in its UI components to symbolize actions or provide additional visual context.

If an icon you need is not included below, please reach out in the #design-system Slack channel.

Icon Set

The icons below are the v2 set, which are primarily pulled from Lucide. See v1 Icons for the previous set. All of the new icons are mapped to the same names as v1 so that nothing breaks when the new set is used. The v2 set includes some new icons that aren’t available in v1.

143 icons

Notes

• In v0.28.0, note was added to replace document but document was kept to support existing uses.
• In v1.37.0, logo-th was added to replace th-logo but th-logo was kept to support existing uses. The new logo-th does not require the utility pv-aspect-3-4.
• In v1.84.0, a new set of icons, sprite-v2.svg, was included in the Pit Viper NPM package.

Usage

Pit Viper compiles all icons into an single SVG sprite which can be included directly on each page rather than referencing an external file. You can call one or more instances of an icon with the SVG use element. You can then apply classes to each instance to change the size, color and other properties.

Example
An icon with default styling.

<svg aria-hidden="true" class="pv-icon">
  <use xlink:href="#medical-square"></use>
</svg>

Using icons without Pit Viper

If you need to make use of Pit Viper icons on non-Pit Viper pages, you can click the name of any icon above to download it and use the individual icon as an embedded SVG. You’ll need to apply the size and color using HTML attributes width and height on the svg element, and fill on the path element.

In general, it’s better to use the svg element for displaying UI icons as it reduces the amount of requests to the server compared to referencing an icon with the img element.

The img element is better suited for illustrative or decorative icons that are typically larger in size and sometimes include multiple paths/colors.

Example
An icon embedded as an SVG.

<svg aria-hidden="true" class="pv-icon">
  <svg viewBox="0 0 24 24" width="24" height="24"><path fill="#176F6F" d="M21 13c0 5.49-3.763 8.302-8.331 9.894l-.008.003a1.997 1.997 0 0 1-1.326-.015C6.759 21.3 3 18.487 3 13V6a2 2 0 0 1 2-2c1.794 0 4.021-1.11 5.582-2.473l.009-.007a2.165 2.165 0 0 1 2.818 0l.009.007C14.988 2.899 17.206 4 19 4a2.008 2.008 0 0 1 1.11.336l.304.25A2 2 0 0 1 21 6v7Zm-2 0V6c-2.206 0-4.966-1.278-6.896-2.965a.171.171 0 0 0-.214.005C9.971 4.713 7.203 6 5 6v7c0 4.51 3.235 6.696 6.996 7.995l.023.008C15.768 19.694 19 17.507 19 13Zm-8-2V9a1 1 0 0 1 2 0v2h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H9a1 1 0 0 1 0-2h2Z"/></svg>
</svg>

Size

Icons can be used in several sizes. The default size is 16x16 but you can append size values to the class to adjust the size based on the context.

.pv-icon-10

.pv-icon (16px)

.pv-icon-20

.pv-icon-24

.pv-icon-32

.pv-icon-64

Color

SVG paths will inherit the color of their parent element. This means you can apply text color utilities to an SVG to change the color of an icon.

Example
Using text color utilities to change an icon’s color.

<svg aria-hidden="true" class="pv-icon-24 pv-text-brand">
  <use xlink:href="#medical-shield"></use>
</svg>
<svg aria-hidden="true" class="pv-icon-24 pv-text-subdued">
  <use xlink:href="#medical-shield"></use>
</svg>

Icon Optimization

Pit Viper uses the following specs to maintain consistency within the set.

• 24x24 artboard
• 1-2px of space between the icon and the edge of the artboard
• Fill color of black (#000000)
• Strokes converted to outlines
• Unified paths to a single compound path

Before adding icons to the system, we run them through SVGOMG to further optimize them.