Icons

Overview

This project uses two icon libraries to provide a comprehensive set of icons for your application:

lucide-react - Primary icon library with 1000+ consistent, customizable icons
react-icons - Secondary library for social media and brand icons

Lucide React Icons

Lucide React is the primary icon library used throughout the project. It provides clean, consistent icons that work well with modern design systems.

Installation

Lucide React is already installed in this project:

"lucide-react": "^0.562.0"

Basic Usage

Import icons directly from lucide-react:

import { Database, Shield, CreditCard } from 'lucide-react';

export function MyComponent() {
  return (
    <div>
      <Database className="h-6 w-6" />
      <Shield className="h-6 w-6 text-blue-500" />
      <CreditCard className="h-6 w-6" />
    </div>
  );
}

Common Icons Used in This Project

Here are the most commonly used icons in this codebase:

Icon	Import Name	Usage
🗄️	`Database`	Database, storage, data management
🛡️	`Shield`	Security, authentication, protection
💳	`CreditCard`	Payments, billing, transactions
💾	`HardDrive`	Storage, backups, data persistence
📄	`FileText`	Documentation, files, content
⚙️	`Settings`	Configuration, preferences, admin
📧	`Mail`	Email, contact, notifications
🔒	`Lock`	Authentication, security, privacy
📊	`BarChart3`	Analytics, metrics, statistics
☀️	`Sun`	Light theme toggle
🌙	`Moon`	Dark theme toggle

Styling Icons

Icons can be styled using Tailwind CSS classes:

import { Database } from 'lucide-react';

// Size
<Database className="h-4 w-4" />  // Small (16px)
<Database className="h-6 w-6" />  // Medium (24px)
<Database className="h-8 w-8" />  // Large (32px)

// Color
<Database className="text-blue-500" />
<Database className="text-white dark:text-black" />

// Combined
<Database className="h-6 w-6 text-blue-500 hover:text-blue-700" />

Using Icons as Props

Pass icons as component props using the LucideIcon type:

import type { LucideIcon } from 'lucide-react';
import { Database, Shield, CreditCard } from 'lucide-react';

interface FeatureCardProps {
  icon: LucideIcon;
  title: string;
  description: string;
}

export function FeatureCard({ icon: Icon, title, description }: FeatureCardProps) {
  return (
    <div className="rounded-lg border p-6">
      <div className="flex h-12 w-12 items-center justify-center bg-black">
        <Icon className="h-6 w-6 text-white" />
      </div>
      <h3 className="mt-4 text-lg font-semibold">{title}</h3>
      <p className="mt-2 text-sm text-gray-600">{description}</p>
    </div>
  );
}

// Usage
export function Features() {
  const features = [
    { icon: Database, title: "Database", description: "Postgres with Drizzle ORM" },
    { icon: Shield, title: "Auth", description: "Better Auth with OAuth" },
    { icon: CreditCard, title: "Payments", description: "Stripe, PayPal, Creem" },
  ];

  return (
    <div className="grid gap-6 md:grid-cols-3">
      {features.map((feature) => (
        <FeatureCard key={feature.title} {...feature} />
      ))}
    </div>
  );
}

Icon Arrays and Mapping

When working with arrays of icons:

import { Database, Shield, CreditCard, Settings } from 'lucide-react';

const features = [
  { label: "Database", icon: Database },
  { label: "Auth", icon: Shield },
  { label: "Payments", icon: CreditCard },
  { label: "Config", icon: Settings },
];

export function FeatureList() {
  return (
    <div className="flex gap-4">
      {features.map(({ label, icon: Icon }) => (
        <div key={label} className="flex items-center gap-2">
          <Icon className="h-4 w-4" />
          <span>{label}</span>
        </div>
      ))}
    </div>
  );
}

React Icons

React Icons provides access to popular icon sets including social media and brand icons.

Installation

React Icons is already installed:

"react-icons": "^5.5.0"

Use Simple Icons (Si prefix) for social media and brand logos:

import { SiX, SiDiscord, SiGithub } from 'react-icons/si';

export function SocialLinks() {
  return (
    <div className="flex gap-4">
      <a href="https://x.com/yourhandle">
        <SiX className="h-4 w-4" />
      </a>
      <a href="https://discord.gg/yourinvite">
        <SiDiscord className="h-4 w-4" />
      </a>
      <a href="https://github.com/yourrepo">
        <SiGithub className="h-4 w-4" />
      </a>
    </div>
  );
}

Available Icon Sets

React Icons includes multiple icon sets with different prefixes:

Si - Simple Icons (brands and logos)
Fa - Font Awesome
Ai - Ant Design Icons
Bi - Bootstrap Icons
Fi - Feather Icons
Hi - Heroicons
Io - Ionicons
Md - Material Design Icons

Example:

import { SiGithub } from 'react-icons/si';  // GitHub logo
import { FaHeart } from 'react-icons/fa';   // Heart icon
import { MdEmail } from 'react-icons/md';   // Email icon

UI Component Icons

Some UI components have built-in icon support:

import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export function MyDropdown() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>Options</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuCheckboxItem checked>
          <CheckIcon className="h-4 w-4" />
          Selected Item
        </DropdownMenuCheckboxItem>
        <DropdownMenuItem>
          <ChevronRightIcon className="h-4 w-4" />
          Next
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Button with Icon

import { Settings } from 'lucide-react';
import { Button } from '@/components/ui/button';

export function SettingsButton() {
  return (
    <Button size="icon">
      <Settings className="h-4 w-4" />
    </Button>
  );
}

Theme Toggle Example

The theme toggle component demonstrates icon usage with state:

import { Moon, Sun } from 'lucide-react';
import { Button } from '@/components/ui/button';

export function ThemeToggle() {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <Button onClick={toggleTheme} size="icon">
      {theme === 'dark' ? (
        <Sun className="h-4 w-4" />
      ) : (
        <Moon className="h-4 w-4" />
      )}
    </Button>
  );
}

Best Practices

1. Consistent Sizing

Use consistent icon sizes throughout your application:

Small: h-3 w-3 or h-4 w-4 (12-16px) - For inline text, badges
Medium: h-5 w-5 or h-6 w-6 (20-24px) - For buttons, cards
Large: h-8 w-8 or h-10 w-10 (32-40px) - For feature sections, headers

2. Accessibility

Always provide context for icons:

// Good - with text label
<button>
  <Settings className="h-4 w-4" />
  <span>Settings</span>
</button>

// Good - with aria-label
<button aria-label="Settings">
  <Settings className="h-4 w-4" />
</button>

// Bad - no context
<button>
  <Settings className="h-4 w-4" />
</button>

3. Type Safety

Use TypeScript types for icon props:

import type { LucideIcon } from 'lucide-react';

interface Props {
  icon: LucideIcon;  // Type-safe icon prop
}

4. Performance

Import only the icons you need:

// Good - tree-shakeable
import { Database, Shield } from 'lucide-react';

// Bad - imports entire library
import * as Icons from 'lucide-react';

Finding More Icons

Lucide Icons

Browse all available icons at lucide.dev

Search by keyword and copy the import statement directly.

React Icons

Browse all icon sets at react-icons.github.io/react-icons

Search across multiple icon libraries and preview icons before using them.

Examples from This Project

Marketing Page Features

src/app/(marketing)/page.tsx

import { Database, Shield, CreditCard, Settings, HardDrive, FileText } from "lucide-react";

const securityFeatures = [
  {
    icon: Shield,
    title: "Secure Authentication",
    description: "Industry-standard OAuth 2.0 with Better Auth.",
  },
  {
    icon: Database,
    title: "Data Protection",
    description: "Encrypted at rest and in transit with automatic backups.",
  },
  {
    icon: CreditCard,
    title: "Payment Security",
    description: "PCI-compliant payment processing.",
  },
];

src/components/layout/Footer.tsx

import { Mail } from "lucide-react";
import { SiX, SiDiscord, SiGithub } from "react-icons/si";

export function Footer() {
  return (
    <div className="flex gap-4">
      <a href={siteConfig.support.email}>
        <Mail className="h-4 w-4" />
      </a>
      <a href={siteConfig.support.x}>
        <SiX className="h-4 w-4" />
      </a>
      <a href={siteConfig.support.discord}>
        <SiDiscord className="h-4 w-4" />
      </a>
      <a href={siteConfig.support.github}>
        <SiGithub className="h-4 w-4" />
      </a>
    </div>
  );
}

Troubleshooting

Icons Not Displaying

If icons aren't showing up:

Check that the import is correct
Verify the icon name exists in the library
Ensure className includes size properties (h-4 w-4)
Check for CSS conflicts

TypeScript Errors

If you get type errors with icon props:

import type { LucideIcon } from 'lucide-react';

// Use the LucideIcon type for props
interface Props {
  icon: LucideIcon;
}

Icons Too Large/Small

Icons inherit the current font size by default. Use explicit sizing:

// Explicit sizing (recommended)
<Database className="h-6 w-6" />

// Font-size based (use carefully)
<Database className="text-2xl" />

Icons

On this page