# Lucide Icons

> Guide for using Lucide icons in WinnetouJs constructos. Use this skill when you need to add icons to your UI components. Use when this capability is needed.

- Skill: `tomevault-io/lucide-icons` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/lucide-icons`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/lucide-icons/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/lucide-icons

---


RULES:

- install: `lucide`
- import only needed icons (tree-shake)
- create icon HTML via `createElement(Icon).outerHTML`
- pass icon HTML string to constructo prop
- use CSS for color (icons inherit text color)
- for SSR use `lucide-static`

BASIC:

```ts
import { createElement, Home } from "lucide";

const homeIcon = createElement(Home, { size: 20 }).outerHTML;
```

```html
<winnetou>
  <span class="icon">{{icon}}</span>
</winnetou>
```

```ts
new $navItem({ icon: homeIcon, text: "Home" }).create("#menu");
```

ICON CUSTOM:

```ts
const alertIcon = createElement(AlertCircle, {
  size: 18,
  strokeWidth: 2,
  color: "#e74c3c",
}).outerHTML;
```

CSS COLOR:

```css
.icon svg {
  width: 1em;
  height: 1em;
}
.icon-danger {
  color: #e74c3c;
}
```

LIBRARY PATTERN:

```ts
import { createElement, Home, Settings } from "lucide";

export const icons = {
  home: (s = 20) => createElement(Home, { size: s }).outerHTML,
  settings: (s = 20) => createElement(Settings, { size: s }).outerHTML,
};
```

SSR:

```ts
// Node
const { Home } = require("lucide-static");
const icon = Home; // raw SVG string
```

BEST PRACTICES:

- cache icon HTML if reused
- keep sizes consistent
- provide labels for icon-only buttons

TROUBLESHOOT:

- icon missing: use `.outerHTML`
- wrong prop: ensure `{{icon}}` matches prop name
- color wrong: set parent `color` or `.icon svg`

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/cedrosdev) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->