UIPackage
Vue React

Icons

React data-display
Edit on GitHub

Showcase + recipe page for the registry’s default icon set (Lucide). Not a runtime component — install the npm package directly. Documented here so consumers can browse names and copy-paste imports.

Also available for Vue ->

Installation

$ npx shadcn@latest add https://react.uipkge.dev/r/react/icons.json

Or with the named registry: npx shadcn@latest add @uipkge-react/icons

Examples

Props

Name Type / Values Default Required
size

Size

 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inherit' — optional
color

Color

 string — optional
className

Custom class for icon libraries (fa-, mdi-, etc.)

 string — optional
src

For img-based icons

 string — optional
alt string — optional
rotation

Rotation/flip

 number | string — optional
flip 'horizontal' | 'vertical' | 'both' — optional
label

A11y

 string — optional
ariaLabel string — optional
inline

Style

 boolean — optional
children

Slot-based icon (Lucide, Heroicons, inline SVG)

 React.ReactNode — optional

Files (2)

  • components/ui/icons/icons.tsx 3 kB 
    import * as React from 'react'
import { cn } from '@/lib/utils'

/**
 * Universal Icon component supporting multiple icon libraries:
 * - Lucide (default, via children)
 * - Font Awesome (via className with fa-* classes)
 * - Material Design Icons (via className with mdi-* classes)
 * - Heroicons (via children)
 * - Custom SVG (via src prop)
 */
export interface IconProps {
  // Size
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inherit'
  // Color
  color?: string
  // Custom class for icon libraries (fa-, mdi-, etc.)
  className?: string
  // For img-based icons
  src?: string
  alt?: string
  // Rotation/flip
  rotation?: number | string
  flip?: 'horizontal' | 'vertical' | 'both'
  // A11y
  label?: string
  ariaLabel?: string
  // Style
  inline?: boolean
  // Slot-based icon (Lucide, Heroicons, inline SVG)
  children?: React.ReactNode
}

const sizeClasses: Record<NonNullable<IconProps['size']>, string> = {
  xs: 'size-3',
  sm: 'size-4',
  md: 'size-5',
  lg: 'size-6',
  xl: 'size-8',
  '2xl': 'size-12',
  inherit: 'size-full',
}

function Icon({
  size = 'md',
  color,
  className,
  src,
  alt,
  rotation,
  flip,
  label,
  ariaLabel,
  inline = true,
  children,
}: IconProps) {
  const rotationDeg = rotation ? (typeof rotation === 'string' ? parseInt(rotation) : rotation) : undefined

  const flipClasses =
    flip === 'horizontal'
      ? '-scale-x-100'
      : flip === 'vertical'
        ? '-scale-y-100'
        : flip === 'both'
          ? '-scale-x-100 -scale-y-100'
          : ''

  // Image-based icon (Material Design, custom URLs, etc.)
  if (src) {
    return (
      <img
        src={src}
        alt={alt || label}
        className={cn('shrink-0 object-contain', size !== 'inherit' ? sizeClasses[size] : '', flipClasses, className)}
        style={{
          color,
          transform: rotationDeg ? `rotate(${rotationDeg}deg)` : undefined,
        }}
        aria-label={ariaLabel || label}
        role="img"
      />
    )
  }

  // Slot-based icon (Lucide, Heroicons, inline SVG)
  return (
    <span
      className={cn(
        'inline-flex shrink-0 items-center justify-center',
        size !== 'inherit' ? sizeClasses[size] : '',
        flipClasses,
        className,
      )}
      style={{
        color,
        transform: rotationDeg ? `rotate(${rotationDeg}deg)` : undefined,
      }}
      aria-label={ariaLabel || label}
      role={label ? 'img' : undefined}
    >
      {children}
    </span>
  )
}

// Icon library class prefixes for reference:
// Font Awesome: 'fa-solid', 'fa-regular', 'fa-brands', 'fa-*'
// Material Design: 'mdi mdi-*'
// Heroicons: already SVG-based, use children

// Helper function to generate Font Awesome class
export function faClass(iconName: string, style: 'solid' | 'regular' | 'brands' = 'solid'): string {
  const prefix = style === 'brands' ? 'fab' : style === 'solid' ? 'fas' : 'far'
  return `${prefix} fa-${iconName}`
}

// Helper function to generate Material Design class
export function mdiClass(iconName: string): string {
  return `mdi mdi-${iconName}`
}

export { Icon }
  • components/ui/icons/index.ts 0.1 kB 
    export { Icon, faClass, mdiClass, type IconProps } from './icons'

Raw manifest: https://react.uipkge.dev/r/react/icons.json