React

bash

npm i kubai-icons-react

Usage

tsx

import { Calendar, Lock } from "kubai-icons-react";

<Calendar />
<Lock size={32} color="#22C55E" variant="soft" title="Locked" />

Prop	Default	Description
`size`	24	Width and height in pixels.
`color`	currentColor	Accent from which every gradient, outline and mark is derived.
`variant`	"color"	`"soft"` lifts the fills, deepens the outlines and turns white marks deep.
`badgeColor`	dark grey	Corner badge disc colour: any CSS colour, or `"semantic"` for a colour per badge (green for add, red for remove, amber for warning, and so on).
`trigger`	"hover"	`"parent"` plays the motion when the closest `[data-kubai-trigger]` (or the parent element) is hovered or focused; `"none"` never plays it.
`hover`	None	Controlled hover: `true` plays the motion, `false` reverses it.
`active` / `defaultActive` / `onActiveChange`	None	Toggle state for tap icons such as `Bookmark`.
`title`	None	Accessible name. Without it the icon is `aria-hidden`.

Other SVG props (className, style, event handlers, ref) pass through to the <svg>.

tsx

<button data-kubai-trigger className="btn">
  <Trash size={18} trigger="parent" />
  Delete
</button>

Names supplied by data require the dynamic component. Each icon remains a separate chunk.

tsx

import { DynamicIcon } from "kubai-icons-react/dynamic";

<DynamicIcon name={item.icon} size={20} />

Icons work in Server Components and Client Components without configuration. Markup renders on the server and motion attaches on hydration.

For the fastest dev-server start, icons can be imported from their own files:

tsx

import Folder from "kubai-icons-react/icons/folder";