Iconography

Icons in ViraUI are not a single bundled set you must adopt. Content slots on controls and surfaces take ReactNode, so your agent passes whatever you already use (lucide-react, @phosphor-icons/react, a custom SVG component, or a sprite <use> glyph) and components render that node beside label text or as the sole affordance.

Built-in chrome (chevrons, checks, close marks) ships as private SVGs inside @viraui/react. You do not need a separate icon package for those defaults.

Pass icons through slots

Addon and icon props render the element you supply. Inherit color with currentColor (or stroke/fill that follows the control tone) so icons track theme and state without per-glyph hex values.

Add icons to the buttons on this screen using our Lucide set. Icons should pick up the button color automatically.

import { Button, IconButton } from '@viraui/react';
import { Inbox } from 'lucide-react';
import { UsersThree } from '@phosphor-icons/react';

<Button addon={<Inbox />}>Inbox</Button>
<IconButton aria-label="Team" icon={<UsersThree />} />

Sprites and inline SVG follow the same contract: pass the element into the slot.

import { Button } from '@viraui/react';

<Button
  addon={
    <svg aria-hidden>
      {/* SVG content */}
    </svg>
  }
>
  Folder
</Button>

Use any icon library

The demo below runs the same empty-state layout three ways: different ReactNode sources, one composition pattern. Pick one primary library for product UI so stroke weight and metaphor stay consistent; reach for a second set only when a glyph is missing.

Build an empty inbox state: centered icon above a heading, muted supporting copy below, with comfortable padding and spacing that matches the rest of the app.