BoxIcon

import { BoxIcon } from "@vortex/ui-cals"
import { Heart, Star, Bell, Home } from "lucide-react"
 
<BoxIcon icon={<Heart />} />
<BoxIcon icon={<Star />} />
<BoxIcon icon={<Bell />} />
<BoxIcon icon={<Home />} />

<BoxIcon backgroundColor="#dbeafe" className="size-10 rounded">
  <span className="text-blue-600 font-bold text-lg">A</span>
</BoxIcon>
<BoxIcon backgroundColor="#dcfce7" className="size-10 rounded">
  <span className="text-green-600 font-bold text-lg">B</span>
</BoxIcon>

<BoxIcon icon={<Heart />} color="#ef4444" />
<BoxIcon icon={<Star />} color="#eab308" />
<BoxIcon icon={<Bell />} color="#3b82f6" />
<BoxIcon icon={<Home />} color="#22c55e" />

<BoxIcon icon={<Heart />} backgroundColor="#fee2e2" color="#ef4444" className="size-10 rounded" />
<BoxIcon icon={<Star />} backgroundColor="#fef9c3" color="#eab308" className="size-10 rounded" />
<BoxIcon icon={<Bell />} backgroundColor="#dbeafe" color="#3b82f6" className="size-10 rounded" />

<BoxIcon icon={<Star />} fontSize="12px" />
<BoxIcon icon={<Star />} fontSize="16px" />
<BoxIcon icon={<Star />} fontSize="24px" />
<BoxIcon icon={<Star />} fontSize="32px" />
<BoxIcon icon={<Star />} fontSize="48px" />

<BoxIcon icon={<Mail />} borderWidth="1px" borderColor="#d1d5db" className="size-10 rounded" />
<BoxIcon icon={<User />} borderWidth="2px" borderColor="#3b82f6" className="size-10 rounded" />
<BoxIcon icon={<Heart />} borderWidth="2px" borderColor="#ef4444"
  backgroundColor="#fee2e2" color="#ef4444" className="size-10 rounded" />

<BoxIcon icon={<Heart />} color="#ef4444" visible={true} />
<BoxIcon icon={<Star />} color="#eab308" visible={false} />