Behive Tech Component Registry

Icon

v0.3.8Stable

A hand-authored, stroke-based SVG icon set behind a single `Icon` component — the same idea as `@ant-design/icons`/`@mui/icons-material`, but self-contained (no new dependency). Icons use `stroke="currentColor"`, so they inherit color from whatever text color is in scope.

pnpm add @behivetech/atoms.icon

Edit the code and the preview updates as you type. Every registry export is in scope — ArrowLeftIcon, ArrowRightIcon, BoldIcon, BoxIcon, CampBorderIcon, CarIcon, CartIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseIcon, CursorIcon, EllipseIcon, ExternalLinkIcon, FileTextIcon, FlameIcon, Icon, ImageIcon, InfoIcon, ItalicIcon, KeyIcon, LabelIcon, LinkIcon, ListIcon, ListOrderedIcon, MenuIcon, PencilIcon, PolygonIcon, PrinterIcon, QuoteIcon, RectangleIcon, RestroomIcon, RoadIcon, StructureIcon, ThermometerIcon, TrashIcon, UploadIcon, WavesIcon, WifiIcon, createIcon from this package, plus React hooks and every other component in the registry.

PlaygroundOpen in new tab
const names: IconName[] = [
  "close",
  "chevron-up",
  "chevron-down",
  "pencil",
  "trash",
  "box",
  "upload",
  "bold",
  "italic",
  "list",
  "link",
  "image",
  "file-text",
  "menu",
  "arrow-left",
  "arrow-right",
  "external-link",
  "cart",
  "printer",
  "check",
  "list-ordered",
  "quote",
  "wifi",
  "key",
  "clock",
  "waves",
  "car",
  "flame",
  "thermometer",
  "info",
];

const AllIcons = () => (
  <div style={{ display: "flex", gap: "0.75rem" }}>
    {names.map((name) => (
      <Icon key={name} name={name} />
    ))}
  </div>
);

render(<AllIcons />);