icons

Standardize Lucide-based icons with a local <x-icon> component.

1|Updated Dec 26, 2025

Search Tags:#icons #svg #web components #lucide #x-icon

One-click install

npx skills add https://github.com/ProfPowell/project-template --skill icons

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: icons
Source: https://github.com/ProfPowell/project-template/tree/main/.claude/skills/icons
Command: npx skills add https://github.com/ProfPowell/project-template --skill icons

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent icon usage leads to a disjoint UI. This Skill standardizes Lucide-based icons via a local <x-icon> component, ensuring accessibility, consistency, and performance.

Core Features & Use Cases

Single Icon Component: Use <x-icon> for all icons.
Accessibility by Default: Optional label for functional icons.
Asset Organization: Centralized assets/icons with a local cache.

Quick Start

<x-icon name="menu" aria-label="Open menu"></x-icon>