# Next.js Lucide Icons Next.js Lucide icons from lucide-react, used straight in server component pages: find an icon, import it by name, size and color it, label icon-only buttons. A small icon tells people what a link or button does before they read its label: a bell for notifications, a printer to print, a trash can to delete. [AdminKit for Next.js](/nextjs/) draws its icons with [Lucide](https://lucide.dev/icons/), an open-source set of 2,015 icons on a 24×24 grid. You get them in the free and PRO versions. Every icon is a React component from the `lucide-react` package. Import `Bell`, write ``, and it renders an inline `` in the color of the surrounding text. Icons work in server components, so you don't need `"use client"` to show one. Pages in the App Router are server components: they render to HTML at build time and have no state. `lucide-react` adds `"use client"` to the parts that need it, so you don't have to. Next.js still writes the `` into the page's HTML. The icons appear before any JavaScript runs, and your page stays a server component with its `metadata` export. ## Example ```html
``` ```tsx code title="src/app/(dashboard)/projects/page.tsx" import { Bell, ChartPie, CreditCard, House, Mail, MessageSquare, Settings, Users, } from "lucide-react"; import { pageMetadata } from "@/lib/site"; export const metadata = pageMetadata("/projects"); export default function ProjectsPage() { return (
); } ``` ## Find an icon Look the icon up on [lucide.dev](https://lucide.dev/icons/), or open `/icons-lucide` in the template. That page shows every icon and filters them by name and tag while you type. The name you find there is in kebab-case. The component is the same name in PascalCase: remove the dashes and capitalize each word. | Lucide name | Component | | --- | --- | | `bell` | `Bell` | | `chart-pie` | `ChartPie` | | `circle-check-big` | `CircleCheckBig` | | `message-square` | `MessageSquare` | A few older names still work as aliases, so `Home` imports `House`. Use the current names from lucide.dev, as the template does. ## Import only what you use Import icons one by one, by name: ```tsx import { Download, Printer, Send } from "lucide-react"; ``` Next.js then ships only those icons to the browser. The rest of the package never reaches your JavaScript, which is what tree shaking means. The package also has an `icons` object that holds every icon. The template imports it in one place: `src/components/pages/icons/lucide/lucide-icons.tsx`, the search list of the Lucide demo page. That component starts with `"use client"` because the search field keeps state. Next.js splits the JavaScript per route, so the full set loads on that page only. Keep to named imports everywhere else. ## Sizes Every icon gets the `lucide` class, which AdminKit's CSS sets to 18×18 pixels and a stroke width of 2. `lucide-sm` makes it 14 pixels and `lucide-lg` 36 pixels. In a `.btn`, icons are 14 pixels. ```html ``` ```tsx code ``` Other sizes take a `style` or a class of your own: ```html ``` ```tsx code ``` Don't count on the `size` and `strokeWidth` props. They become attributes on the ``, and the `lucide` class overrides those. Use `style` instead, for example `style={{ strokeWidth: 1.5 }}`. ## Colors An icon draws in `currentColor`, the text color of its parent. Bootstrap's text color classes give it a color of its own: ```html ``` ```tsx code ``` ## Icons next to text Next to a label, give the icon `align-middle` so it lines up with the text, and `me-1` for a little space. The invoice page does this for its Print, Download PDF and Send invoice buttons. ```html ``` ```tsx code ``` ## Icon-only buttons Without a label, a screen reader has nothing to say about a button. Put an `aria-label` on the button that names the action. You don't have to hide the icon: `lucide-react` gives it `aria-hidden="true"` unless you pass it an `aria-*`, `role` or `title` prop. ```html ``` ```tsx code import { Pen, Trash } from "lucide-react"; ``` ## Pass an icon as a prop A stat card or a menu item often shows an icon that its parent chooses. How you pass it depends on what kind of component receives it. A server component can take the icon component itself, typed as `LucideIcon`. The Analytics dashboard passes `icon={Users}` to its `Stats` cards, which have no `"use client"`: ```tsx import { DollarSign, type LucideIcon } from "lucide-react"; function StatCard({ icon: Icon, title }: { icon: LucideIcon; title: string }) { return (
{title}
); } ; ``` A client component can't take it from a server component page. A component is a function, and a server component can only pass data that Next.js can send to the browser. Pass the rendered icon instead, typed as `ReactNode`, as the CRM dashboard of AdminKit PRO does with its `CrmStatCard`: ```tsx title="src/app/(dashboard)/dashboard-crm/page.tsx" } stat="customers" /> ``` Between client components, either way works. The sidebar is a client component and reads its menu from `src/data/navigation.ts`, where each item has an `icon` such as `SlidersVertical`. ## Accessibility - `lucide-react` adds `aria-hidden="true"` to an icon, unless you give it an `aria-*`, `role` or `title` prop. - A button or link with only an icon needs an `aria-label`. The edit and delete links of the tables demo have one. - If an icon means something on its own, without text next to it, add a text alternative: an `aria-label` on the element around it, or a `