Without a unified icon system, developers reduplicate lucide-react imports across components, manually calculate size pixels, handle kebab-to-PascalCase conversion, and omit aria-hidden or data-* attributes that agents need to identify icons programmatically. Icons become ad-hoc divs or <img> tags scattered across the page, breaking consistency when a designer changes the icon library or theme.

Icon is a controlled span component that resolves icon components by name from a pluggable registry. It accepts a name prop (kebab-case, e.g., "arrow-right"), optional size (xs/sm/md/lg/xl), and optional iconSet to select a registered icon library. It auto-resolves lucide-react icons without pre-registration and exports three setup factories: registerIcons() to add custom icons to the default set, registerIconSet() to swap entire icon sources, and configureIcons() to change the default set. Every icon gets a stable data-react-fancy-icon selector and aria-hidden="true" for accessibility and agent bridging.

Import Icon from @particle-academy/react-fancy and use <Icon name="rocket" size="lg" /> to render any lucide icon by its kebab-case name. To register custom icons, call registerIcons({ Home, Settings, Mail }) at app start with the icon components you want to use. Agents can read data-react-fancy-icon to identify icons and mutate name or size props to change the rendered icon without DOM scraping.