UIPackage
Vue React

Icon Box

React data-display
Edit on GitHub

Small framed icon used inside cards, list items, and stat tiles. Three variants (`primary`, `muted`, `custom`), two shapes (`rounded`, `circle`), and three sizes. Drop a Lucide icon in, get a polished badge.

Also available for Vue ->

Installation

$ npx shadcn@latest add https://react.uipkge.dev/r/react/icon-box.json

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

Examples

Props

Name Type / Values Default Required
icon

Lucide icon component rendered inside the box.

 LucideIcon — required
variant 'primary' | 'muted' | 'custom' primary optional
shape 'rounded' | 'circle' rounded optional
size 'sm' | 'md' | 'lg' md optional
iconClassName string — optional

Dependencies

lucide-react

Used by

quick-actions

Files (2)

  • components/ui/icon-box/icon-box.tsx 1.3 kB 
    import * as React from 'react'
import type { LucideIcon } from 'lucide-react'
import { cn } from '@/lib/utils'

export interface IconBoxProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Lucide icon component rendered inside the box. */
  icon: LucideIcon
  variant?: 'primary' | 'muted' | 'custom'
  shape?: 'rounded' | 'circle'
  size?: 'sm' | 'md' | 'lg'
  iconClassName?: string
}

const variantClasses: Record<string, string> = {
  primary: 'bg-primary/10 text-primary',
  muted: 'bg-muted text-muted-foreground',
  custom: '',
}

const shapeClasses: Record<string, string> = {
  rounded: 'rounded-lg',
  circle: 'rounded-full',
}

const sizeClasses: Record<string, string> = {
  sm: 'p-1.5',
  md: 'p-2',
  lg: 'p-3',
}

const iconSizes: Record<string, string> = {
  sm: 'size-3.5',
  md: 'size-4',
  lg: 'size-6',
}

const IconBox = React.forwardRef<HTMLDivElement, IconBoxProps>(
  ({ className, icon: Icon, variant = 'primary', shape = 'rounded', size = 'md', iconClassName, ...props }, ref) => (
    <div
      ref={ref}
      className={cn('shrink-0', variantClasses[variant], shapeClasses[shape], sizeClasses[size], className)}
      {...props}
    >
      <Icon className={cn(iconSizes[size], iconClassName)} />
    </div>
  ),
)
IconBox.displayName = 'IconBox'

export { IconBox }
  • components/ui/icon-box/index.ts 0.1 kB 
    export { IconBox, type IconBoxProps } from './icon-box'

Raw manifest: https://react.uipkge.dev/r/react/icon-box.json