VB Design System

<icon-specimen>

Curated icon-language specimen: a fixed set of icons across the sizing scale.

Overview

The <icon-specimen> component presents a project's icon language: a curated, fixed set of icon names rendered across the sizing scale. Unlike <icon-set>, it doesn't search or fetch a manifest — it's a design specimen for showing which icons a project uses and how they read at each size, not a browser for finding icon names.

Attributes

Attribute Type Default Description
set string lucide Icon set directory under the icon base path.
names string — (required) Space/comma-separated list of curated icon names to display.
data-sizes string 1rem 1.5rem 2rem Space-separated sizing scale. Each icon renders once per size.

Rendering

Each cell renders the icon with the [data-icon] primitive itself (<i data-icon="..." data-icon-set="...">) — a currentColor CSS mask — so the specimen demonstrates the same terse authoring pattern it documents. Sizing comes from an inline font-size on each cell, since [data-icon] is sized in em units.

Design system workflow

Use <icon-specimen> to document the small, curated set of icons a project actually uses — as opposed to <icon-set>, which browses the full catalog. A typical icon guidelines page shows:

  1. The curated icon list at every size the project uses (via data-sizes).
  2. Do/don't guidance authored alongside it (e.g. a data-list="do-dont" block) for usage rules such as stroke weight or minimum size.

Accessibility

  • Icon names are always visible as text (in a <code> row header), never conveyed by glyph alone.
  • The specimen renders as a native <table> with <th scope="row">/<th scope="col"> headers, so assistive tech can announce which icon and size a cell represents.
  • The rendered [data-icon] glyphs are marked aria-hidden (decorative); the icon's meaning is carried by the visible name text.
↑