Icons

Vanduo includes Phosphor Icons — a flexible icon family with 1,500+ icons in 6 weights. Icons are bundled locally with no external dependencies.

Icon Weights

6 distinct weights for different visual styles:

Regular
.ph

Fill
.ph-fill

Bold
.ph-bold

Light
.ph-light

Thin
.ph-thin

Duotone
.ph-duotone

Note: The default css/vanduo.css bundle (and css/icons/icons.css) load only the regular and fill weights. The bold, light, thin, and duotone weights above require css/icons/icons-all.css — this documentation site loads it to preview every weight. See Import Options below.

Quick Start

Include the icons stylesheet and use <i> elements with the appropriate classes: 

<!-- Include default weights (regular + fill) -->
<link rel="stylesheet" href="css/icons/icons.css">

<!-- Use icons -->
<i class="ph ph-heart"></i>
<i class="ph-fill ph-star"></i>
<i class="ph ph-house"></i>
Import Options
<!-- Default (regular + fill) - Recommended -->
<link rel="stylesheet" href="css/icons/icons.css">

<!-- All 6 weights (~3MB) -->
<link rel="stylesheet" href="css/icons/icons-all.css">

<!-- Individual weights -->
<link rel="stylesheet" href="icons/phosphor/bold/style.css">
<link rel="stylesheet" href="icons/phosphor/light/style.css">
Example Icons

Browse all 1,500+ icons at phosphoricons.com

Styling Icons

Icons are font-based — style them with CSS:

<!-- Size with font-size -->
<i class="ph ph-heart" style="font-size: 48px;"></i>

<!-- Color with color -->
<i class="ph-fill ph-star" style="color: gold;"></i>

<!-- Use CSS variables -->
<i class="ph ph-check" style="color: var(--vd-color-success);"></i>
Icons in Buttons

Icons by Phosphor Icons — MIT Licensed

Accessibility

Phosphor icons render as empty <i> elements (the glyph is a font), so they carry no text for assistive tech. Two rules cover every case:

Decorative (sits beside a visible label) → hide it with aria-hidden="true"; the label already speaks for it.
Meaningful & standalone (icon-only button/link) → name the control with aria-label="…". 
<!-- Decorative: label is visible, hide the icon -->
<button class="vd-btn vd-btn-primary">
  <i class="ph ph-download-simple" aria-hidden="true"></i> Download
</button>

<!-- Icon-only: give the control an accessible name -->
<button class="vd-btn" aria-label="Close dialog">
  <i class="ph ph-x" aria-hidden="true"></i>
</button>

Also mind touch targets: keep icon-only controls at least 24×24px (WCAG 2.2). More in Accessibility Essentials.