Wappler Community

Custom AppConnect Extension: @vyakriti/wappler-lucide-icons

Wappler Extensions

Priya_Sharma May 4, 2026, 6:32am 1

Wappler Lucide Icons v2.0.4

A clean Wappler App Connect extension for rendering Lucide icons.

This rebuild intentionally uses manual text input for icon names. There are no select/dropdown icon pickers.

Install in Wappler

In Wappler, open Project Settings → Extensions.
Search for @vyakriti/wappler-lucide-icons and add this extension package.
Restart Wappler if needed.
In the App Connect component picker, look for:
```
Lucide → Lucide Icon
```

Usage

<dmx-lucide-icon id="my_icon" icon="menu"></dmx-lucide-icon>

Examples of icon names:

menu
settings
arrow-right
circle-help
shopping-cart

With options:

<dmx-lucide-icon
  id="next_icon"
  icon="arrow-right"
  size="32"
  color="#0d6efd"
  stroke-width="2"
  label="Next"
></dmx-lucide-icon>

Notes

Icon names must be Lucide kebab-case names.
Lucide is loaded from the pinned CDN URL:
https://unpkg.com/lucide@1.8.0/dist/umd/lucide.min.js
Runtime script is copied by Wappler to:
js/dmx-lucide-icon.js

Wappler UI Screenshots:

2 Likes