gettemplategettemplate|Documentation

Lucide Icons

Beautiful icons with Lucide React

Lucide Icons

We use Lucide React for consistent, beautiful icons.

Installation

npm install lucide-react

Usage

import { 
  ArrowRight, 
  Code, 
  ExternalLink,
  Github,
  Twitter 
} from "lucide-react";

const MyComponent = () => (
  <div className="flex gap-4">
    <ArrowRight className="w-5 h-5" />
    <Code className="w-5 h-5 text-zinc-600" />
    <Github className="w-5 h-5 hover:text-zinc-900" />
  </div>
);

Common Icons We Use

IconUsage
ArrowRightCTAs, Links
CodeCode sections
ExternalLinkExternal links
GithubSocial, Auth
TwitterSocial
CheckSuccess, Lists
XClose, Error
MenuMobile nav
ChevronDownDropdowns

Icon Sizing

<Icon className="w-4 h-4" />  {/* Small */}
<Icon className="w-5 h-5" />  {/* Default */}
<Icon className="w-6 h-6" />  {/* Large */}