Skip to main content

​
Usage

The Icon component renders icons from the Kivora icon set, which is powered by Lucide React. It provides a consistent API for rendering icons with customizable size and color. 
import { Icon } from '@kivora/react';

<Icon name="check" size={20} />

​
Examples

​
Basic Icon

<Icon name="check" />

​
Custom Size and Color

<Icon name="heart" size={24} color="red" />

​
With Accessibility Label

<button>
  <Icon name="close" aria-label="Close dialog" />
</button>

​
In Buttons

<button className="flex items-center gap-2">
  <Icon name="download" size={16} />
  Download
</button>

​
Props

​
name
IconName
required
The name of the icon to render. Available icons include:
  • Navigation: arrow-left, arrow-right, arrow-up, arrow-down, chevron-left, chevron-right, chevron-up, chevron-down, home, menu
  • Actions: check, close, plus, minus, edit, trash, copy, share, download, upload, search
  • UI: eye, eye-off, more-horizontal, more-vertical, loader
  • Status: info, warning, error, success
  • User: user, users, settings, bell, mail, lock, unlock
  • Misc: star, heart, calendar, clock
​
size
number
default:"16"
The size of the icon in pixels.
​
color
string
default:"'currentColor'"
The color of the icon. Defaults to inheriting the current text color.
​
className
string
Additional CSS classes to apply to the icon.
​
aria-label
string
Accessibility label for the icon. Use when the icon is the only content (e.g., in icon-only buttons).
​
accessibilityLabel
string
Alternative to aria-label for accessibility labels.

​
Accessibility

  • When aria-label or accessibilityLabel is provided, the icon is visible to screen readers
  • When no label is provided, aria-hidden="true" is automatically set
  • Always provide an accessibility label for standalone icons that convey meaning

Build docs developers (and LLMs) love

Get started for freeTalk to us