@zentrades-ui/icons

A collection of 25+ commonly used SVG icons for the Zen UI design system. All icons are optimized for React with full TypeScript support.

Installation

npm install @zentrades-ui/icons
# or
pnpm add @zentrades-ui/icons
# or
yarn add @zentrades-ui/icons

Usage

Using Individual Icon Components

Import and use icons directly by their component name:

import { CheckIcon, ChevronDownIcon, SearchIcon } from "@zentrades-ui/icons";

function App() {
  return (
    <div>
      <CheckIcon size="24" />
      <ChevronDownIcon size="16" />
      <SearchIcon size="20" />
    </div>
  );
}

Using IconByName (Dynamic Icons)

Use the IconByName component when you need to render icons dynamically:

import { IconByName } from "@zentrades-ui/icons";

function App() {
  return (
    <div>
      <IconByName name="check" size="24" />
      <IconByName name="chevron-down" size="16" />
      <IconByName name="search" size="20" />
    </div>
  );
}

Creating Custom Icons

Use the base Icon component to create your own icons:

import { Icon, IconProps } from "@zentrades-ui/icons";

function MyCustomIcon(props: IconProps) {
  return (
    <Icon viewBox="0 0 24 24" {...props}>
      <path d="M12 2L2 22h20L12 2z" stroke="currentColor" />
    </Icon>
  );
}

Props

Common Icon Props

| Prop | Type | Default | Description | | ----------- | ------------------------------------------------- | --------- | -------------------------- | | size | "12" \| "16" \| "20" \| "24" \| "32" \| "40" \| "48" | "24" | Icon size in pixels | | title | string | - | Accessible title for the icon | | className | string | - | Additional CSS class | | viewBox | string | "0 0 24 24" | SVG viewBox attribute |

All icons also accept standard SVG props like stroke, strokeWidth, fill, color, etc.

IconByName Props

| Prop | Type | Required | Description | | ------ | ---------- | -------- | ------------------------- | | name | IconName | Yes | Name of the icon to render |

Available Icons

| Name | Component | Description | | ----------------- | -------------------- | ------------------------------ | | chevron-left | ChevronLeftIcon | Left chevron arrow | | chevron-right | ChevronRightIcon | Right chevron arrow | | chevron-down | ChevronDownIcon | Down chevron arrow | | chevron-up | ChevronUpIcon | Up chevron arrow | | close | CloseIcon | Close/X icon | | check | CheckIcon | Checkmark | | plus | PlusIcon | Plus/Add icon | | minus | MinusIcon | Minus/Remove icon | | search | SearchIcon | Search/Magnifying glass | | calendar | CalendarIcon | Calendar | | clock | ClockIcon | Clock/Time | | upload-cloud | UploadCloudIcon | Cloud upload | | more-vertical | MoreVerticalIcon | Vertical ellipsis menu | | more-horizontal | MoreHorizontalIcon | Horizontal ellipsis menu | | arrow-left | ArrowLeftIcon | Left arrow | | arrow-right | ArrowRightIcon | Right arrow | | info | InfoIcon | Information circle | | alert-circle | AlertCircleIcon | Alert/Warning circle | | check-circle | CheckCircleIcon | Success/Check circle | | trash | TrashIcon | Delete/Trash | | edit | EditIcon | Edit/Pencil | | copy | CopyIcon | Copy/Duplicate | | external-link | ExternalLinkIcon | External link arrow | | filter | FilterIcon | Filter | | sort | SortIcon | Sort arrows | | settings | SettingsIcon | Settings/Sliders | | user | UserIcon | User/Profile |

Examples

With Custom Color

<CheckIcon size="24" stroke="#10b981" />
<CheckIcon size="24" style={{ color: "var(--color-success)" }} />

With Custom Stroke Width

<CheckIcon size="24" strokeWidth={2.5} />

With Accessibility Title

<CheckIcon size="24" title="Task completed" />

Getting Available Icon Names

import { iconNames } from "@zentrades-ui/icons";

console.log(iconNames);
// ['chevron-left', 'chevron-right', 'chevron-down', ...]

TypeScript

Full TypeScript support with exported types:

import type { IconProps, IconName, IconSize, NamedIconProps } from "@zentrades-ui/icons";

License

MIT