# Bootstrap 5 Lucide Icons

AdminKit renders Lucide icons from data-lucide attributes. Bundled icons, sizes, colors, adding icons and rendering icons inserted at runtime.

AdminKit uses [Lucide](https://lucide.dev/icons/), 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.

## Example

```html
<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](https://lucide.dev/icons/), not deprecated aliases: `house`, not `home`.

## Bundled icons

`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 icons

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.

```js title="src/js/modules/icons.js"
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.

```html
<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`:

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

## Icons added at runtime

`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.

## Sizes

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>`.

```html
<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:

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

## Color variants

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

```html
<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 icons

Browse and search all icons on [lucide.dev](https://lucide.dev/icons/), 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](/docs/getting-started/changelog/).

---

Canonical HTML page: https://adminkit.io/docs/icons/lucide-icons/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/docs/ · Questions: support@adminkit.io