lucide-icons

Name: lucide-icons
Author: aksuharun

github.com/aksuharunDesign & UI1310 installsUpdated 19w ago

About lucide-icons

lucide-icons is a skill for using Lucide's framework-specific icon packages in interface projects. It covers individual SVG icon imports, shared props, accessibility, and framework references.

Key features

01Framework-specific icon packages
02Individually importable inline SVG icons
03Shared size, color, and stroke props
04Tree-shakeable package guidance
05Accessibility and dynamic icon guidance
06Framework-specific reference files

Use cases

01Add SVG icons to a framework interface
02Import only the icons used in a bundle
03Render icons whose names come from dynamic data

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/aksuharun/skills --skill lucide-icons

After installing, type/lucide-iconsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/

lucide-angular.md

lucide-astro.md

lucide-preact.md

lucide-react-native.md

lucide-react.md

lucide-solid.md

lucide-static.md

lucide-svelte.md

lucide-vue-next.md

lucide.md

Details

From the project README

Lucide Icons

Lucide provides framework-specific packages—each icon is an individually importable component/element that renders an inline SVG. All packages are fully tree-shakeable.

Icon Naming

Package exports use PascalCase: Camera, ArrowRight, CircleAlert
CSS/HTML data attributes and icon font classes use kebab-case: data-lucide="circle-alert", icon-circle-alert
Find icon names at lucide.dev/icons

Universal Props

All framework packages share the same core props:

prop	type	default
`size`	number	24
`color`	string	currentColor
`strokeWidth`	number	2
`absoluteStrokeWidth`	boolean	false

All packages also accept any SVG presentation attribute as a prop (e.g. fill, stroke-linejoin).

Best Practices

Always tree-shake: Import only the icons you use. Never import * as icons in production bundles.
Direct icon imports (e.g. from 'lucide-react/icons/camera') improve build performance by bypassing the package barrel.
Dynamic by name: Use DynamicIcon (React) or a generic wrapper only when icon names come from dynamic data (e.g. a CMS).
Accessibility: Icons default to aria-hidden="true". Add aria-label when the icon conveys meaning.

Framework Reference Files

Read the relevant reference file for the framework in use:

Framework / Environment	Package	Reference file
React	`lucide-react`	references/lucide-react.md
Vue 3	`lucide-vue-next`	references/lucide-vue-next.md
Svelte 5 (or 4)	`@lucide/svelte`	references/lucide-svelte.md
SolidJS	`lucide-solid`	references/lucide-solid.md
Preact	`lucide-preact`	references/lucide-preact.md
Angular	`lucide-angular`	references/lucide-angular.md
Astro	`@lucide/astro`	references/lucide-astro.md
React Native	`lucide-react-native`	references/lucide-react-native.md
Vanilla JS / HTML	`lucide`	references/lucide.md
Static / No-framework / Node.js	`lucide-static`	references/lucide-static.md

Lucide Lab (Custom / Unofficial Icons)

Lucide lab provides additional icons not in the main library. All packages support lab icons via their Icon component:

// React example — same pattern works across React, Preact, Solid, Astro, Svelte, Vue
import { Icon } from 'lucide-react';
import { coconut } from '@lucide/lab';

<Icon iconNode={coconut} color="red" size={32} />

Comments

Markdown supported