@vinyasa/icons

A curated set of icon components built on lucide-react, each sized at 1em by default so it scales automatically with the surrounding font size (e.g. dropped straight into @vinyasa/button's leadingIcon/trailingIcon slots).

Installation

pnpm add @vinyasa/icons react react-dom

No dependency on @vinyasa/tokens — icons are plain presentational SVG wrappers, no theming involved.

This package has no root export — every icon is subpath-only (import { PlusIcon } from '@vinyasa/icons/plus', never from '@vinyasa/icons'). Icons have no CSS to leak, but the package still follows the same subpath-only convention every @vinyasa/* package uses, so there's one predictable way to import from any of them.

Usage

import { PlusIcon } from '@vinyasa/icons/plus';
import Button from '@vinyasa/button/button';

<Button leadingIcon={<PlusIcon />}>Add item</Button>;

Icons inherit currentColor (lucide's own default), so they automatically match whatever text color is active — no per-icon color prop needed inside a themed component like Button.

Override size, color, or stroke width like any lucide-react icon — an explicit prop always wins over the 1em default:

<PlusIcon size={24} color="red" strokeWidth={1.5} />

Available icons

AlertTriangleIcon, ArrowLeftIcon, ArrowRightIcon, BoldIcon, CalendarIcon, CheckIcon, CheckCircleIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, CopyIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, InfoIcon, ItalicIcon, ListIcon, ListOrderedIcon, MenuIcon, MinusIcon, PaletteIcon, PaperclipIcon, PencilIcon, PlusIcon, QuoteIcon, RedoIcon, SearchIcon, SettingsIcon, StrikethroughIcon, ThumbsDownIcon, ThumbsUpIcon, TrashIcon, UndoIcon, UploadIcon, UserIcon, XIcon.

See the Foundations/Icons Storybook gallery for a visual reference.

Adding a new icon

This is a deliberately curated subset of lucide-react's full icon set, not a re-export of all of it. To add one:

// src/components/star/index.ts
import { Star } from 'lucide-react';

import { createIcon } from '../../createIcon';

export const StarIcon = createIcon(Star);

Then add its own subpath entry to package.json's exports map (there's no root barrel to fall back on — every icon, including new ones, needs its own explicit entry, matching every other icon already there).

createIcon is also exported publicly, at its own subpath, for wrapping any other lucide-react icon with the same 1em-default behavior without adding it to this package's curated set:

import { Star } from 'lucide-react';
import { createIcon } from '@vinyasa/icons/create-icon';

const StarIcon = createIcon(Star);

Development

From the repository root:

pnpm --filter @vinyasa/icons build
pnpm --filter @vinyasa/icons test
pnpm --filter @vinyasa/icons lint
pnpm storybook   # Foundations/Icons