Skip to Content
ComponentsIcon

Icon

Rayden UI includes 200+ icons with outline and solid variants in multiple sizes.

Import

import { Icon } from "@raydenui/ui";

Usage

Basic

<Icon name="home" />

Variants

// Outline (default)
<Icon name="home" variant="outline" />
 
// Solid
<Icon name="home" variant="solid" />

Sizes

<Icon name="home" size="xs" /> {/* 12px */}
<Icon name="home" size="sm" /> {/* 16px */}
<Icon name="home" size="md" /> {/* 20px */}
<Icon name="home" size="lg" /> {/* 24px */}
<Icon name="home" size="xl" /> {/* 32px */}

Custom Color

<Icon name="heart" className="text-primary-500" />
<Icon name="check-circle" className="text-success-400" />
<Icon name="x-circle" className="text-error-400" />

Available Icons

  • home, home-alt, x, chevron-left, chevron-right, chevron-up, chevron-down
  • arrow-left, arrow-right, arrow-up, arrow-down
  • link, link-detach, log-out

Actions

  • plus, minus, pencil, pencil-edit, bin, copy, download, upload
  • search, filter, settings, settings-1, settings-2

Status

  • check, check-circle, x-circle, info-circle
  • bell, star, heart, bookmark

Content

  • file, folder, image, calendar, clock, map-marker, globe, mail

Users

  • user, users, user-add, user-cross, user-circle

Props

PropTypeDefaultDescription
namestring—Icon name (required)
variant"outline" | "solid""outline"Icon variant
size"xs" | "sm" | "md" | "lg" | "xl""md"Icon size
classNamestring—Additional CSS classes

Accessibility

  • Icons are decorative by default (aria-hidden="true")
  • Add aria-label for standalone icons with meaning
Last updated on
FormControlInput