Copyimport { Icons } from "@/components/icons"
 
export function Example() {
  return (
    <div className="flex items-center gap-2">
      <Icons.github className="size-5" />
      <Icons.check className="size-5 text-green-500" />
      <Icons.alertCircle className="text-destructive size-5" />
    </div>
  )
}

Copyimport { Icons } from "@/components/icons"
 
<Icons.github className="size-5" />
<Icons.check className="size-5 text-green-500" />
<Icons.spinner className="size-5 animate-spin" />

Copyimport { GitHubIcon, CheckIcon } from "@/components/icons"
 
<GitHubIcon className="size-5" />
<CheckIcon className="size-5" />

Copyimport { Icon } from "@/components/icons"
 
;<Icon name="github" className="size-5" />

Copy<Icons.github className="size-4" />  {/* 16px */}
<Icons.github className="size-5" />  {/* 20px */}
<Icons.github className="size-6" />  {/* 24px */}
<Icons.github className="size-8" />  {/* 32px */}

Copy<div className="text-primary">
  <Icons.github /> {/* Inherits text-primary */}
</div>

Copy<Icons.github className="text-muted-foreground" />
<Icons.alertCircle className="text-destructive" />
<Icons.check className="text-green-500" />

Copy<Icons.check className="icon-success" />      {/* Green */}
<Icons.trash className="icon-destructive" />  {/* Red */}
<Icons.info className="icon-muted" />         {/* Muted */}
<Icons.star className="icon-warning" />       {/* Yellow */}

Copy/icon-add activity

Copy# Migrate a single file
/icon-migrate src/components/example.tsx
 
# Migrate in batches (10 files at a time)
/icon-migrate batch
 
# Migrate all files (with confirmation)
/icon-migrate all
 
# Show migration status
/icon-migrate report

Copy/icon-audit

Copy# Sync registry with Icons namespace
/icon-registry sync
 
# Add single icon to registry
/icon-registry add alertCircle
 
# Validate registry completeness
/icon-registry validate
 
# Export registry as JSON
/icon-registry export

Copy/icon-validate

Copy# Fetch from Anthropic design system
/icon-fetch anthropic
 
# Fetch education-style icons
/icon-fetch education
 
# Fetch school operations icons
/icon-fetch school
 
# Fetch from all sources
/icon-fetch all

Copyimport { AlertCircle, RefreshCw, Moon, Sun } from "lucide-react"
 
<AlertCircle className="h-4 w-4" />
<RefreshCw className="h-5 w-5 animate-spin" />

Copyimport { Icons } from "@/components/icons"
 
<Icons.alertCircle className="size-4" />
<Icons.refresh className="size-5 animate-spin" />

Copyinterface IconMetadata {
  id: string // kebab-case identifier
  name: string // Display name
  component: IconComponent // React component
  category: IconCategory // Primary category
  tags: string[] // Search keywords
  description?: string // Usage description
  viewBox: string // SVG viewBox
  customizable: boolean // Can use className for colors
}

Copyimport { searchIcons } from "@/components/icons/utils"
 
const results = searchIcons("arrow")
// Returns icons matching "arrow" in id, name, tags, or description

Copyimport { getIconsByCategory, IconCategory } from "@/components/icons"
 
const systemIcons = getIconsByCategory(IconCategory.SYSTEM)
const integrationIcons = getIconsByCategory(IconCategory.INTEGRATIONS)

Copy// categories/system.tsx
 
export const NewIcon = (props: IconProps) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    {...props}
  >
    <path d="..." />
  </svg>
)

Copy// index.tsx
 
export const Icons = {
  // ... existing icons
  newIcon: SystemIcons.NewIcon,
} as const

Copy// registry.ts
 
{
  id: "new-icon",
  name: "New Icon",
  component: SystemIcons.NewIcon,
  category: IconCategory.SYSTEM,
  tags: ["new", "icon", "example"],
  description: "Description of the icon",
  viewBox: "0 0 24 24",
  customizable: true,
}

Copyimport Image from "next/image"
 
import { ANTHROPIC_ILLUSTRATIONS } from "@/components/icons"
 
;<Image
  src={ANTHROPIC_ILLUSTRATIONS.handsBuild}
  alt="Hands building"
  width={200}
  height={200}
/>

Copyimport { getIconForLanguage } from "@/components/icons"
 
const Icon = getIconForLanguage("ts")   // TypeScriptIcon
const Icon = getIconForLanguage("py")   // PythonIcon
const Icon = getIconForLanguage("rs")   // RustIcon
 
<Icon className="size-4" />

Copyimport { getAllIconNames, getIconCount } from "@/components/icons"
 
const names = getAllIconNames() // ["logo", "github", "check", ...]
const count = getIconCount() // 120+

Copyimport type { IconName } from "@/components/icons"
 
function IconButton({ icon }: { icon: IconName }) {
  const IconComponent = Icons[icon]
  return <IconComponent className="size-4" />
}

Copyimport { Icons } from "@/components/icons"
 
console.log(Object.keys(Icons)) // List all available icons

Copyimport type { IconName } from "@/components/icons"
 
const iconName: IconName = "github" // Type-checked

Copy// Check the SVG has fill="currentColor" or stroke="currentColor"
<path fill="currentColor" d="..." />

Copy/icon-registry sync