React Lucide Icons

Icons help people scan a page: a bell for notifications, a pen to edit, a trash can to delete. AdminKit for React uses Lucide, a set of 2,015 open-source icons drawn on a 24×24 grid. They are in the free and PRO versions of AdminKit for React.

Each icon is a React component from the lucide-react package. You import the ones you need and write them like any other element: <Bell />. Each one renders an inline <svg> that takes the color of the text around it.

ExampleCopy Anchor Link

import {
  Bell,
  ChartPie,
  CreditCard,
  House,
  Mail,
  MessageSquare,
  Settings,
  Users,
} from "lucide-react";

export function IconRow() {
  return (
    <div className="d-flex gap-3">
      <House />
      <Bell />
      <Mail />
      <MessageSquare />
      <Users />
      <CreditCard />
      <ChartPie />
      <Settings />
    </div>
  );
}

Find an iconCopy Anchor Link

Search for an icon on lucide.dev, or open the Lucide page of the template (/icons-lucide). That page lists every icon and filters them by name and tag as you type.

Lucide names are in kebab-case, and the component has the same name in PascalCase. Drop the dashes and start each word with a capital:

Some old names still import, as aliases of the current ones: Home gives you House. The template always uses the current names from lucide.dev, and so should you.

Import only what you useCopy Anchor Link

Import each icon by name, as the template does in every file:

import { Download, Printer, Send } from "lucide-react";

The build then keeps only those icons and leaves the rest of the package out of your JavaScript. This is called tree shaking.

lucide-react also exports an icons object with every icon in it. Only the Lucide demo page imports it, in src/components/pages/icons/lucide/lucide-icons.tsx, because it shows them all. Every route in src/routes/ loads on its own with React.lazy, so that full set only loads when someone opens that page. Anywhere else, stick to named imports.

SizesCopy Anchor Link

AdminKit's CSS gives every icon the lucide class: 18×18 pixels with a stroke width of 2. Add lucide-sm for 14 pixels or lucide-lg for 36 pixels. Inside a .btn, icons are 14 pixels.

<Bell className="lucide-sm" />
<Bell />
<Bell className="lucide-lg" />

For any other size, set the width and height with a style or a class of your own:

<Bell style={{ width: 24, height: 24 }} />
<Bell style={{ width: 48, height: 48 }} />

The size and strokeWidth props of lucide-react don't change much here. They set attributes on the <svg>, and the lucide class in the CSS overrides them. A style, such as style={{ strokeWidth: 1.5 }}, does win over the class.

ColorsCopy Anchor Link

Icons draw with currentColor, so they take the text color of their parent. To give one its own color, add a Bootstrap text color class:

<Bell className="text-primary" />
<Bell className="text-secondary" />
<Bell className="text-success" />
<Bell className="text-danger" />
<Bell className="text-warning" />
<Bell className="text-info" />

Icons next to textCopy Anchor Link

When an icon sits next to a label, the template adds align-middle to line it up with the text and me-1 for a small gap:

<button type="button" className="btn btn-primary">
  <Download className="align-middle me-1" /> Download PDF
</button>

Icon-only buttonsCopy Anchor Link

A button with only an icon has no text for a screen reader to read. Give the button an aria-label that says what it does. The icon itself is decoration: lucide-react adds aria-hidden="true" to it for you, as long as you don't give it an aria-*, role or title prop.

import { Pen, Trash } from "lucide-react";

<button type="button" className="btn btn-light" aria-label="Edit">
  <Pen />
</button>
<button type="button" className="btn btn-light" aria-label="Delete">
  <Trash />
</button>

Pass an icon as a propCopy Anchor Link

Sometimes a component shows an icon that its parent picks, like a stat card or a menu item. Type the prop as LucideIcon and pass the component itself. The dashboard stat cards (Stats) and the sidebar menu (src/data/navigation.ts) do this:

import { DollarSign, type LucideIcon } from "lucide-react";

function StatCard({ icon: Icon, title }: { icon: LucideIcon; title: string }) {
  return (
    <div className="card">
      <div className="card-body">
        <Icon className="align-middle" /> {title}
      </div>
    </div>
  );
}

<StatCard icon={DollarSign} title="Income" />;

AccessibilityCopy Anchor Link

• lucide-react hides an icon from screen readers with aria-hidden="true", unless you give it an aria-*, role or title prop.
• A button or link with only an icon needs an aria-label, as the edit and delete links of the tables demo have.
• An icon that carries meaning on its own, without text next to it, needs a text alternative. Put an aria-label on the element around it, or add a visually hidden <span className="visually-hidden"> with the text.

RelatedCopy Anchor Link

• Next.js Lucide icons: the same icons in AdminKit for Next.js
• Bootstrap 5 Lucide icons: the icons of the HTML version
• Font Awesome icons: the second icon set of AdminKit PRO
• Buttons: buttons with icons
• Lucide icons demo