Icons
Lucide, at four sizes, sized by the component rather than by the call site.
The set
Icons come from lucide-react. It is the one component-adjacent dependency the library keeps — it ships paths, not styling, so it cannot leak CSS into a customer's exported site the way a utility framework would.
PlusSettingsTrash2EyeLayersLayoutDashboardChevronRightCopyCheckSizes
Four sizes, matching the Figma set: --icon-small 16, --icon-regular 20, --icon-medium 24 and --icon-large 32. A 12px --icon-xs exists for the densest inline actions.
--icon-xs--icon-small--icon-regular--icon-medium--icon-largeUsing them
The component decides the icon size, not the caller. IconButton at md expects 16, at sm expects 14 and at xs expects 12; passing a mismatched size is how a button ends up looking subtly wrong in one place only.
An icon that sits beside a label is decorative — the label already says what the control does — so it should be hidden from assistive technology. Button's leftIcon and rightIcon do that for you. An icon that stands alone is not decorative, and needs a real name: that is what IconButton's required label is for.