Skip to main content

Icons

One icon set in every format: React components, framework-free SVG strings, a <vhyx-icon> web component and a sprite sheet. Sizes and stroke follow design tokens, motion is built in, and there are no runtime dependencies.

@vhyxui/iconsNew

Install

bash
pnpm add @vhyxui/icons

React

tsx
import { CheckIcon, TriangleAlertIcon } from '@vhyxui/icons';

<CheckIcon />                                   // 1em, follows the text colour
<TriangleAlertIcon size="sm" title="Warning" />  // token size, announced to screen readers
<CheckIcon size={20} strokeWidth={1.5} />

Sizes xs to xl map to the --vhyx-icon-size-* tokens; stroke width follows --vhyx-icon-stroke. Icons are decorative unless you give them a title or aria-label. Each icon is a separate export, so only the icons you import are bundled.

Motion

tsx
import '@vhyxui/icons/style.css';

<CheckIcon animate="draw" />       // strokes draw in
<LoaderCircleIcon animate="spin" />

Animations use the motion tokens and stop automatically under reduced motion.

Without React

ts
import { toSvg, checkNode } from '@vhyxui/icons/svg';
element.innerHTML = toSvg(checkNode, { size: 'sm', title: 'Done' });

import { defineIconElement } from '@vhyxui/icons/element';
defineIconElement();   // <vhyx-icon name="check" size="sm" label="Saved"></vhyx-icon>

Also available: @vhyxui/icons/sprite.svg (every icon as a <symbol>) and each source drawing at @vhyxui/icons/icons/<name>.svg.