Skip to content
VVVER

Design System / 07.14

Icons

Icon normalizes size, stroke, color, and accessibility for a Lucide or compatible SVG glyph supplied by the application. The field guide shows common Lucide imports.

Component reference

Icon

A dependency-free adapter for line glyphs. It passes an explicit currentColor, a 1.5px absolute stroke, and one of three house sizes while leaving the glyph itself to the host. Decorative icons are hidden from assistive technology; a trimmed label, aria-label, or titlenames a standalone semantic icon.

Live specimen

Rendered output

Small / 16px
Medium / 20px
Large / 24px
Compatible custom glyph / 28px
Decorative beside visible textCalendarNamed standalone icons / invalid size falls back to 16px
tsx
import { Search } from "lucide-react";
import { Icon } from "vvver-design-system";

// Decorative beside a visible label:
<Icon as={Search} />

// A standalone semantic image:
<Icon as={Search} size="md" label="Search" />

// Native aria-label is also accepted:
<Icon aria-label="Search" as={Search} />

API reference

Inputs, types, and behavior

Inputas
TypeIconGlyph
BehaviorA Lucide forwardRef export or compatible SVG component. Invalid or missing runtime values render nothing instead of throwing.
Inputsize
Type"sm" | "md" | "lg" | number
Behavior16 / 20 / 24, or any positive finite pixel number. Invalid runtime values fall back to 16.
Inputlabel / aria-label
Typestring?
BehaviorA trimmed accessible name adds role=img. Blank names are treated as decorative.
Inputtitle
Typestring?
BehaviorOptional native tooltip and fallback accessible name. Prefer label when tooltip copy differs from the name.
InputclassName
Typestring?
BehaviorMerged last on the glyph. Use inherited text opacity to dim; the wrapper passes color=currentColor explicitly.

Glyph field guide

These glyphs come from the Lucide package installed by the docs app. Labels match their import names; import only the glyphs you use. Brand marks remain separate, hand-drawn ProviderMark components.

  • Search
  • Settings
  • Bell
  • User
  • Mail
  • Calendar
  • Folder
  • Filter
  • SlidersHorizontal
  • LayoutGrid
  • Command
  • Plus
  • Check
  • X
  • ChevronDown
  • ArrowUpRight
  • ExternalLink
  • Link
  • Copy
  • Download
  • Trash2
  • Eye
  • Lock
  • Star
  • TrendingUp
  • Info
  • Ellipsis
  • Menu
  • Upload
  • Zap

Install lucide-react in the consuming application. The design-system package has no icon-library dependency. Install Lucide in the consuming application if you use these glyphs.