Icons

@kikumi3n/icons provides 56+ icons as individual React components with a consistent API.

Install

pnpm add @kikumi3n/icons

Usage

import { Check, X, Search, Bell } from '@kikumi3n/icons';

<Check />
<X size={20} />
<Search color="var(--color-primary)" />
<Bell aria-label="Notifications" />

Props (all icons)

Prop	Type	Default	Description
size	number | string	24	Width & height
color	string	'currentColor'	Stroke color
aria-label	string	—	Accessible label

When no aria-label is set, the icon is decorative (aria-hidden="true").

Icon Catalog

Navigation

ChevronDown · ChevronUp · ChevronLeft · ChevronRight · ArrowDown · ArrowUp · ArrowLeft · ArrowRight · Menu · Home · LogOut · ExternalLink · Link

Actions

Edit · Edit2 · Trash · Trash2 · Copy · Download · Upload · Eye · EyeOff · Settings

Status

Check · CheckCircle · Info · AlertCircle · AlertTriangle

Media

File · FileText · Folder · ImageIcon · Paperclip

Communication

Mail · MessageSquare · Phone · Bell

Misc

Search · User · Calendar · Clock · Filter · SortAsc · SortDesc · Star · Heart · Share2 · CreditCard

UI

X · Plus · Minus · Loader2 · MoreHorizontal · MoreVertical · Command

Custom Icons

Create your own icons using createIcon:

import { createIcon } from '@kikumi3n/icons';

export const MyIcon = createIcon(
  'MyIcon',
  <>
    <circle cx="12" cy="12" r="10" />
    <path d="M8 12l3 3 5-5" />
  </>
);

// Usage — same API as all other icons
<MyIcon size={20} color="green" />

With Components

import { Button, IconButton } from '@kikumi3n/ui';
import { Plus, Trash } from '@kikumi3n/icons';

<Button leftIcon={<Plus size={16} />}>Add Item</Button>
<IconButton icon={<Trash size={18} />} aria-label="Delete" variant="danger" />

Tree Shaking

Each icon is individually exportable — unused icons are automatically excluded from your bundle:

// ✅ Only Check and X are included in your bundle
import { Check, X } from '@kikumi3n/icons';

Architecture

All icons are built with createIcon, which wraps raw SVG paths in a consistent React component with:

• forwardRef support
• 24×24 viewBox
• Stroke-based rendering (2px stroke width)
• Proper ARIA attributes