Bootstrap 5 Lucide Icons

AdminKit uses Lucide, an open-source set of SVG icons drawn on a 24×24 grid. An <i> element with a data-lucide attribute gets an inline <svg class="lucide lucide-<name>"> inside it, when the page loads and whenever such an element is added later.

ExampleCopy Anchor Link

<i data-lucide="house"></i>
<i data-lucide="bell"></i>
<i data-lucide="briefcase"></i>
<i data-lucide="chart-pie"></i>
<i data-lucide="coffee"></i>
<i data-lucide="credit-card"></i>
<i data-lucide="mail"></i>
<i data-lucide="map-pin"></i>
<i data-lucide="message-square"></i>
<i data-lucide="settings"></i>
<i data-lucide="tag"></i>
<i data-lucide="users"></i>

Use the icon names listed on lucide.dev, not deprecated aliases: house, not home.

Bundled iconsCopy Anchor Link

js/app.js bundles only the icons the template pages use, so it stays small. They are listed in src/js/modules/icons.js, and AdminKit PRO bundles more of them than the free version because it has more pages. An icon that is not bundled stays an empty <i> element, and app.js logs a warning in the console.

Adding iconsCopy Anchor Link

In the template source, import the icon from lucide in src/js/modules/icons.js and add it to the icons object. npm run lint fails when a template uses an icon that is not bundled, or when the list bundles one that no template uses.

import {
  createElement,
  Bell,
  // ...
  Gauge,
} from "lucide";

const icons = {
  Bell,
  // ...
  Gauge,
};

Without a build step, load js/icons-all.js after js/app.js. It adds all 1,908 Lucide icons to window.lucide.icons (about 400 KB, minified). The template's icons page (icons-lucide.html) loads it this way.

<script type="module" src="js/app.js"></script>
<script type="module" src="js/icons-all.js"></script>

In a project that installs @adminkit/core from npm, import it before app.js:

import "@adminkit/core/dist/js/icons-all.js";
import "@adminkit/core";

Icons added at runtimeCopy Anchor Link

app.js renders icons in markup that is added after the page has loaded, for example by a single-page app, Turbo or Livewire, without any call. The <i> element stays in the page, so a framework can update or remove it, and changing its data-lucide attribute renders the other icon.

SizesCopy Anchor Link

The .lucide class that every rendered icon gets sets 18×18 pixels and a stroke width of 2. Add lucide-sm (14 pixels) or lucide-lg (36 pixels) for the other two sizes. The classes on the <i> element are copied to the <svg>.

<i data-lucide="bell" class="lucide-sm"></i>
<i data-lucide="bell"></i>
<i data-lucide="bell" class="lucide-lg"></i>

For any other size, set width and height with an inline style or your own class:

<i data-lucide="bell" style="width:24px;height:24px;"></i>
<i data-lucide="bell" style="width:48px;height:48px;"></i>

Color variantsCopy Anchor Link

Icons draw with currentColor, so Bootstrap's text color utilities color them:

<i data-lucide="bell" class="text-primary"></i>
<i data-lucide="bell" class="text-secondary"></i>
<i data-lucide="bell" class="text-success"></i>
<i data-lucide="bell" class="text-danger"></i>
<i data-lucide="bell" class="text-warning"></i>
<i data-lucide="bell" class="text-info"></i>

All iconsCopy Anchor Link

Browse and search all icons on lucide.dev, or open icons-lucide.html in the template. AdminKit 4.0 uses Lucide 1.62.0. For changes coming from AdminKit 3.x, see the changelog.