Docs / Components
SenseIconComponent
Curated inline SVG glyphs for UI chrome (buttons, alerts, form affordances) — not a general icon library. Import from @artificialsenselabs/ui.
Live demo: run nx serve showcase and open /components/icon (port 4202).
Overview
Category: Display / primitives. Selector: sense-icon. Import: import { SenseIconComponent } from '@artificialsenselabs/ui';
name is required and must be a built-in SenseIconName. There is no custom SVG / font registry and no ADR-0030 variant — icons are not interactive surfaces.
<sense-icon name="search" size="sm" ariaLabel="Search" />API
Generated from libs/ui/src/lib/icon/sense-icon/sense-icon.component.ts — run pnpm run docs:api to refresh.
| Input | Type | Default | Description |
|---|---|---|---|
name | SenseIconName | required | Required glyph name. |
size | SenseIconSize | 'md' | Scale token (`md` default). |
ariaLabel | string | null | null | Accessible name when not decorative. |
spin | boolean | false | Force spin (auto for `spinner`). |
Accessibility
- Decorative icons set
aria-hidden="true"on host and SVG. - Labelled icons expose
role="img"andaria-label. - Prefer parent control labels (e.g.
sense-button) over per-icon labels in composites. - Spin animation pauses under
prefers-reduced-motion: reduce.