VB Design System

<icon-set>

Searchable grid of icons in a set, with click-to-copy names.

Overview

The <icon-set> component renders a searchable, filterable grid of every icon in a set. Each cell renders the icon with the [data-icon] primitive (lazy-mounted as you scroll, so the full set doesn't fetch every SVG at once) and copies its name to the clipboard on click — a quick way to browse and pick icon names for use elsewhere.

The full set

With just a set, <icon-set> fetches that set's name manifest and renders every icon (the Lucide set is ~1,900 icons). Use the search box to filter as you type. Loading the whole set fetches each SVG, so give it a moment on first paint.

A curated subset

Pass an explicit names list to show just the icons you care about — useful for documenting a project's chosen icon vocabulary without the full catalog.

Attributes

Attribute Type Default Description
set string lucide Icon set directory under the icon base path.
names string — Space/comma-separated list of icon names. When present, this bypasses the {iconBase}/{set}.json manifest fetch entirely — useful for curated subsets or offline demos.

Filtering and copying

Type in the search field to narrow the grid by icon name. Click any icon's button to copy its name to the clipboard — paste it directly into an <icon-wc name="..."> attribute or a data-icon value elsewhere in your markup.

Design system workflow

Use <icon-set> as a live reference alongside <icon-wc> whenever you need to pick an icon name without leaving the docs:

  1. Filter the grid to narrow down candidates.
  2. Click an icon to copy its name.
  3. Paste the name into a <icon-wc name="..."> element.

Accessibility

  • The filter field is a native <input type="search"> with an accessible (visually-hidden) label.
  • Each grid cell is a real <button type="button">, keyboard-focusable and operable with Enter/Space.
  • Each cell's icon name is echoed as visible text next to the icon — never conveyed by the icon glyph alone.
  • Filtered-out cells are hidden with the native hidden attribute, removing them from the accessibility tree.
↑