add-icon

name	add-icon
description	Add Lucide React icons to components following project conventions

When adding icons to components in this Next.js dashboard:

1. Import icons from lucide-react:

   import { IconName } from "lucide-react";
   

   Find available icons at: https://lucide.dev/icons

2. Standard icon sizes in this project:

   • Small: h-4 w-4 (16px) - Used in cards and small UI elements
   • Medium: h-5 w-5 (20px) - Used in buttons and medium elements
   • Large: h-6 w-6 (24px) - Used in headers and prominent elements

3. Icon color conventions:

   // Muted (standard for most dashboard icons)
   <Icon className="h-4 w-4 text-muted-foreground" />
   
   // Foreground (normal text color)
   <Icon className="h-4 w-4 text-foreground" />
   
   // Accent colors
   <Icon className="h-4 w-4 text-primary" />
   <Icon className="h-4 w-4 text-destructive" />
   

4. Icons in dashboard stat cards:

   import { DollarSign, Users, TrendingUp } from "lucide-react";
   
   const stats = [
     {
       title: "Revenue",
       value: "$45,231",
       change: "+20.1%",
       changeType: "positive" as const,
       icon: DollarSign, // Pass as component reference
     }
   ];
   
   // Used in component:
   <stat.icon className="h-4 w-4 text-muted-foreground" />
   

5. Icons in buttons:

   import { Plus, Download, Settings } from "lucide-react";
   
   <Button>
     <Plus className="mr-2 h-4 w-4" />
     Add Item
   </Button>
   

6. Icons in navigation:

   import { Home, BarChart, Settings } from "lucide-react";
   
   <nav>
     <Link href="/dashboard">
       <Home className="h-5 w-5 mr-2" />
       Dashboard
     </Link>
   </nav>
   

7. Trend indicators (existing pattern):

   import { ArrowUpRight, ArrowDownRight } from "lucide-react";
   
   {changeType === 'positive' ? (
     <ArrowUpRight className="h-3 w-3 mr-1" />
   ) : (
     <ArrowDownRight className="h-3 w-3 mr-1" />
   )}
   

8. Icon accessibility:

   • Icons used for meaning should have accessible text
   • Decorative icons can be aria-hidden

   // Meaningful icon
   <Icon className="h-4 w-4" aria-label="Settings" />
   
   // Decorative icon (text already present)
   <Icon className="h-4 w-4" aria-hidden="true" />
   

Examples

Add icon to a stat card

import { Activity } from "lucide-react";

const stats = [
  {
    title: "Active Sessions",
    value: "573",
    change: "+12.1%",
    changeType: "positive" as const,
    icon: Activity,
  }
];

Create a button with icon

import { Download } from "lucide-react";
import { Button } from "@/components/ui/button";

<Button>
  <Download className="mr-2 h-4 w-4" />
  Download Report
</Button>

Add icon to card header

import { TrendingUp } from "lucide-react";
import { Card, CardHeader, CardTitle } from "@/components/ui/card";

<Card>
  <CardHeader className="flex flex-row items-center justify-between">
    <CardTitle>Performance</CardTitle>
    <TrendingUp className="h-4 w-4 text-muted-foreground" />
  </CardHeader>
</Card>

Tips

• Lucide icons are tree-shakeable - only imported icons are bundled
• Icons automatically inherit color from text-* classes
• Use consistent sizing throughout the application
• Icons should complement text, not replace it (for accessibility)

Related Files

• src/components/DashboardCharts.tsx
• src/components/DashboardCards.tsx
• src/components/AppSidebar.tsx

Related Skills

• add-dashboard-card
• add-shadcn-component