Icons

import { HugeiconsIcon, Search01Icon, ChevronRightIcon } from "@/components/icons";

export default function Example() {
  return (
    <div className="flex gap-2">
      <HugeiconsIcon icon={Search01Icon} size={20} />
      <HugeiconsIcon icon={ChevronRightIcon} size={16} />
    </div>
  );
}

<HugeiconsIcon 
  icon={IconName} 
  size={24}              // Size in pixels
  strokeWidth={1.5}      // Optional stroke width
  className="text-blue-500"  // Optional styling
/>

<HugeiconsIcon icon={HomeIcon} size={16} />  {/* Small */}
<HugeiconsIcon icon={HomeIcon} size={20} />  {/* Medium */}
<HugeiconsIcon icon={HomeIcon} size={24} />  {/* Large */}
<HugeiconsIcon icon={HomeIcon} size={32} />  {/* Extra Large */}

<HugeiconsIcon icon={BoldIcon} strokeWidth={1} />    {/* Thin */}
<HugeiconsIcon icon={BoldIcon} strokeWidth={1.5} />  {/* Regular */}
<HugeiconsIcon icon={BoldIcon} strokeWidth={2} />    {/* Medium */}
<HugeiconsIcon icon={BoldIcon} strokeWidth={2.5} />  {/* Bold */}

<HugeiconsIcon 
  icon={HeartIcon} 
  size={24}
  className="text-red-500 hover:text-red-600 transition-colors"
/>

npm install @hugeicons/core-icons

// registry/new-york/ui/icons.tsx
export * from "@hugeicons/core-icons";  // Changed from core-free-icons
export { HugeiconsIcon } from "@hugeicons/react";

import {
  ChevronRightIcon,
  ChevronLeftIcon,
  ChevronDownIcon,
  ChevronUpIcon,
  ArrowRight01Icon,
  Menu01Icon,
  Cancel01Icon,
} from "@/components/icons";

import {
  Copy01Icon,
  Download01Icon,
  Upload01Icon,
  Tick02Icon,
  Delete02Icon,
  Edit02Icon,
} from "@/components/icons";

import {
  Image01Icon,
  File01Icon,
  Video01Icon,
  MusicNote01Icon,
  DocumentCodeIcon,
} from "@/components/icons";

import {
  Search01Icon,
  Filter01Icon,
  Settings01Icon,
  Loading03Icon,
  AlertCircleIcon,
  CheckmarkCircle02Icon,
} from "@/components/icons";

import {
  Mail01Icon,
  MessageIcon,
  NotificationIcon,
  Share01Icon,
} from "@/components/icons";

<div className="text-zinc-500">
  <HugeiconsIcon icon={InfoIcon} size={20} />
  {/* Icon will be zinc-500 */}
</div>

<div className="text-blue-600">
  <HugeiconsIcon icon={LinkIcon} size={20} />
  {/* Icon will be blue-600 */}
</div>

<button aria-label="Search">
  <HugeiconsIcon icon={Search01Icon} size={20} aria-hidden="true" />
</button>

<button>
  <HugeiconsIcon icon={Delete02Icon} size={16} aria-hidden="true" />
  <span>Delete</span>
</button>

import { HugeiconsIcon, Search01Icon } from "@/components/icons";
import type { HugeiconsIconProps } from "@hugeicons/react";

const MyIcon: React.FC<HugeiconsIconProps> = (props) => {
  return <HugeiconsIcon icon={Search01Icon} {...props} />;
};