Icon Usage

Install the icon package.

pnpm add @vellira-ui/icons

React

import { Search } from '@vellira-ui/icons';

<Search />;

React Native

import { Search } from '@vellira-ui/icons';

<Search />;

Size

<Search size={20} />

Color

<Search color='currentColor' />

Icons inherit text color by default, making them easy to integrate with buttons, links, and typography.

Accessibility

Decorative icons should be hidden from assistive technologies.

<Search aria-hidden />

Icons that communicate meaning should have an accessible label through the parent control.

<Button aria-label='Search' iconStart={<Search />} />

Tree Shaking

Import icons individually.

import { Search } from '@vellira-ui/icons';

Avoid importing the entire library when only a few icons are required.

Best Practices

• Use icons to reinforce labels, not replace them.
• Keep icon sizes consistent throughout a product.
• Reserve animation for interactive feedback.
• Prefer decorative icons with aria-hidden.
• Use accessible labels for icon-only actions.

Storybook

Browse the complete icon collection.

Open Storybook