Icons

import { Icon } from "@/components/ui/icon"
import { IconSearch, IconHeart, IconCheck } from "@tabler/icons-react"

// Basic usage
<Icon icon={IconSearch} size="md" className="text-accent" />
<Icon icon={IconHeart} size="md" className="text-error" />
<Icon icon={IconCheck} size="md" className="text-success" />

import { IconButton } from "@/components/ui/icon"
import { IconSettings, IconHeart, IconPlus } from "@tabler/icons-react"

// Icon buttons with variants
<IconButton icon={IconSettings} label="Settings" variant="default" />
<IconButton icon={IconHeart} label="Like" variant="ghost" />
<IconButton icon={IconPlus} label="Add" variant="accent" />

// Icons with button text
<button className="inline-flex items-center gap-2 bg-accent
               hover:bg-accent-hover text-white px-6 py-3 rounded-lg">
  <Icon icon={IconDownload} size="sm" />
  <span className="font-semibold">Download</span>
</button>

<button className="inline-flex items-center gap-2 bg-surface-2
               hover:bg-surface-3 text-foreground px-6 py-3 rounded-lg border">
  <Icon icon={IconShare} size="sm" />
  <span className="font-semibold">Share</span>
</button>