Card Kind Icons

A nine-glyph icon set for labeling card-shaped learning artifacts — lesson, problem, lab, debug, review, capstone, quiz, arena, sandbox. Every glyph lives on a 24×24 grid with 1.5–2px strokes; everything paints in currentColor so the host tints with text-* utilities.

Installation

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

Usage

import { CardKindIcon } from "@craft-bits/core";
 
<CardKindIcon kind="lesson" />
<CardKindIcon kind="problem" size={20} className="text-cb-accent" />

Or destructure a per-kind component when you need a stable reference:

import { CARD_KIND_ICONS } from "@craft-bits/core";
 
const { lesson: LessonIcon, capstone: CapstoneIcon } = CARD_KIND_ICONS;

Understanding the component

1. One component, one kind prop. A single CardKindIcon switches between all nine glyphs — there's no per-kind import. Kind names mirror common card types.
2. currentColor everywhere. Stroke and fill (where used) resolve to currentColor. Tint with any text-cb-* utility.
3. Sharp at small sizes. Geometry is locked to integer (or .5 stroke-centered) coordinates on the 24×24 grid. The default strokeWidth={1.6} matches other line-icon sets at 24px.
4. CARD_KIND_ICONS map for menus. When you need to pass a component reference (e.g. populating a menu config), CARD_KIND_ICONS[kind] returns a forwardRef component bound to that kind.

Props

Accessibility

• The root SVG carries aria-hidden="true" because these glyphs accompany visible text labels in the contexts they were designed for. If you use the icon without a sibling label, override with aria-label and aria-hidden={false}.
• Stroke contrast is the consumer's responsibility — pair with text-cb-fg / text-cb-fg-muted for WCAG AA contrast on cb-bg backgrounds.
• No motion. Reduced-motion users see the same static glyph.

Credits

• Extracted from: craftingattention (app/src/lessons/primitives/chrome/icons/CardKindIcons.tsx).
• Linear / Cursor / Vercel-aesthetic line icons; geometry over decoration.