Band Icons

A 24×24 icon set where each glyph encodes the substance of its phase, not a generic motif. Pass band="math" (or any registered band name) and the matching SVG renders inline.

Installation

npx shadcn@latest add https://craftbits.dev/r/band-icons.json

Usage

import { BandIcon } from "@craft-bits/core";
 
<BandIcon band="math" size={24} />

Understanding the component

1. Single inline SVG. BandIcon renders one <svg viewBox="0 0 24 24"> and switches only the inner paths based on band. No per-icon imports or bundle bloat from a glyph file per band.
2. currentColor strokes. Every glyph uses stroke="currentColor", so coloring the icon is just setting color (or a text-cb-* token) on the parent.
3. Crisp at 16px. Coordinates land on integer / half-integer values so the 1.6px stroke stays sharp at small sizes.
4. BAND_ICONS map for iteration. The full Record<BandName, ReactNode> is exported so legends and sidebars can iterate the set without re-listing band names.

Variants / Examples

// Tint via parent color.
<span className="text-cb-accent">
  <BandIcon band="learning" size={32} />
</span>
 
// Iterate the full set.
import { BAND_NAMES } from "@craft-bits/core";
 
{BAND_NAMES.map((b) => <BandIcon key={b} band={b} />)}

Props

Accessibility

• Each glyph is decorative (aria-hidden="true") by default. If the icon carries meaning on its own, pair it with a visible text label or override with aria-label on the consuming element.
• Strokes use currentColor and the default fill is none, so contrast tracks the parent text color and inherits any prefers-contrast overrides applied site-wide.

Credits

• Extracted from: craftingattention (app/src/lessons/primitives/chrome/icons/BandIcons.tsx).