# Lucide React Dynamic Icons And Lucide Lab

> Use `DynamicIcon`, Lucide Lab, or custom `iconNode` data in React with the right tradeoffs. Use when tasks mention `lucide-react/dynamic`, `DynamicIcon`, icon names coming from a CMS or database, `@lucide/lab`, the `Icon` component, custom Lucide nodes, or loading icons outside the core Lucide set.

- **Type:** Skill
- **Install:** `agentstack add skill-andrewsrigom-agent-skills-lucide-react-dynamic-icons-and-lucide-lab`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [andrewsrigom](https://agentstack.voostack.com/s/andrewsrigom)
- **Installs:** 0
- **Category:** [Databases](https://agentstack.voostack.com/c/databases)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [andrewsrigom](https://github.com/andrewsrigom)
- **Source:** https://github.com/andrewsrigom/agent-skills/tree/main/lucide-react/lucide-react-dynamic-icons-and-lucide-lab
- **Website:** https://andrewsrigom.github.io/agent-skills/

## Install

```sh
agentstack add skill-andrewsrigom-agent-skills-lucide-react-dynamic-icons-and-lucide-lab
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Lucide React Dynamic Icons And Lucide Lab

Use this skill when the app cannot rely only on static named imports from `lucide-react`.

## Scope

- `DynamicIcon` and dynamic icon names
- caveats of data-driven icon loading
- `@lucide/lab`
- the `Icon` component
- custom `iconNode` data
- choosing between direct imports, dynamic loading, and Lab/custom icons

## Default path

1. Read [references/dynamic-and-lab.md](./references/dynamic-and-lab.md).
2. Ask whether the icon list is static or data-driven.
3. If the icon set is static, route back to `lucide-react-overview-and-setup` and use direct imports.
4. Use `DynamicIcon` only when icon names truly come from runtime data such as CMS entries or database rows.
5. Use `Icon` with `@lucide/lab` or custom icon nodes when the app needs icons outside the core Lucide package.

## When to deviate

- Keep the core package only when all icons are in the main Lucide set.
- Use `Icon` plus `@lucide/lab` for non-core or custom nodes rather than forcing everything through `DynamicIcon`.
- Validate or normalize icon names before render when they come from remote data.
- Move back to the overview skill when the icon set turns out to be static after all.

## Guardrails

- `DynamicIcon` is not the default path; it increases build and delivery cost.
- Expect SSR and loading-state considerations when icon names are resolved dynamically.
- Keep runtime icon names validated or normalized instead of trusting arbitrary strings.
- Use `Icon` for Lucide Lab or custom icon nodes, not `DynamicIcon`.
- Treat `@lucide/lab` as an extension set, not the baseline icon dependency for every project.

## Avoid

- using `DynamicIcon` for a static set of known icons
- trusting arbitrary runtime icon names without validation
- treating `@lucide/lab` as a required dependency for normal app usage
- using `DynamicIcon` when the real need is a Lab or custom icon node

## Verification checklist

- the icon set is confirmed to be static or runtime-driven
- `DynamicIcon` is only used for real runtime-name scenarios
- Lab or custom nodes use `Icon`, not `DynamicIcon`
- remote icon names are validated or normalized
- SSR and loading behavior are considered when icons load dynamically

## Quick examples

Lucide Lab:

```tsx
import { Icon } from "lucide-react";
import { coconut } from "@lucide/lab";

export function LabExample() {
  return ;
}
```

Dynamic icon by name:

```tsx
import { DynamicIcon } from "lucide-react/dynamic";

export function CmsIcon({ name }: { name: string }) {
  return ;
}
```

## Current snapshot

- Checked against official docs on 2026-04-03
- Current npm line verified live on 2026-04-03: `@lucide/lab@0.1.2`
- Official React docs still recommend direct imports for static use cases and reserve `DynamicIcon` for runtime-name scenarios

## References

- [Dynamic icons and Lucide Lab](./references/dynamic-and-lab.md)

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [andrewsrigom](https://github.com/andrewsrigom)
- **Source:** [andrewsrigom/agent-skills](https://github.com/andrewsrigom/agent-skills)
- **License:** MIT
- **Homepage:** https://andrewsrigom.github.io/agent-skills/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-andrewsrigom-agent-skills-lucide-react-dynamic-icons-and-lucide-lab
- Seller: https://agentstack.voostack.com/s/andrewsrigom
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.