Aria Icons

Use when working with icons in any project. Search 1.4M icons, add them as source files (no giant dependency), migrate existing icon libraries, and run as an MCP server. Commands: `aria-icons search`, `aria-icons add`, `aria-icons get`, `aria-icons migrate`, `aria-icons doctor`.

103 stars 6 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add LeulAria/Aria-Icons --skill aria-icons

Manual install

git clone --depth 1 https://github.com/LeulAria/Aria-Icons.git /tmp/Aria-Icons
mkdir -p ~/.claude/skills
cp -r /tmp/Aria-Icons/skills ~/.claude/skills/aria-icons

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Aria Icons

Find any icon. Put it directly into the codebase. Let AI use it.

The CLI is tiny — it talks to the Aria Icons API and only downloads the icons you ask for.

## Installation

```bash
npm install -g aria-icons
# or
bun add -g aria-icons
```

Run without installing:

```bash
npx aria-icons search arrow --limit 10
npx aria-icons add house
```

Point at a local API during development:

```bash
ARIA_ICONS_API=http://localhost:3001 aria-icons search house
```

## CLI

```bash
# Search
aria-icons search <query> [--collection lucide] [--style outline] [--limit 32] [--json]

# Get SVG / component source
aria-icons get lucide:house
aria-icons get lucide:house --format react --size 20 --color currentColor

# Add to the project (detects React/Vue/Svelte/Solid/Flutter/RN)
aria-icons add house arrow-up github
aria-icons add lucide:house --out-dir src/components/icons

# Audit + migrate
aria-icons doctor
aria-icons similar lucide:house
aria-icons equivalent lucide:house --to tabler
aria-icons migrate --to lucide --dry-run
aria-icons migrate --to lucide

# MCP for agents
aria-icons setup
aria-icons mcp
```

## Icon IDs

`collection:name` — e.g. `lucide:house`, `tabler:arrow-up`, `mdi:account`, `thesvg:github`.

Aliases: `lucide` → `lucide-icons`, `tabler` → `tabler-icons`, `feather` → `feathers`.

## MCP tools

| Tool | Description |
|------|-------------|
| `search_icons` | Search across all collections |
| `get_icon` | SVG + framework snippets |
| `get_icon_svg` | SVG only |

Read the full skill on GitHub

Details

Skill name: aria-icons
Repository: LeulAria/Aria-Icons
Path: skills/SKILL.md
License: MIT
Repo updated: 17 October 2026
Listed in: heilcheng/awesome-agent-skills, karanb192/awesome-claude-skills

FAQ

What does the Aria Icons skill do?

How do I install the Aria Icons skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add LeulAria/Aria-Icons --skill aria-icons. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Aria Icons popular?

It lives in LeulAria/Aria-Icons, which has 103 GitHub stars and 6 forks, and is included in 2 curated skill lists.

Related skills

Material Design 3 UI

159

skydashnet/material-design-3-ui-skill

Design, redesign, review, or implement user interfaces using Google Material Design 3 (M3), Material You, and optional Material 3 Expressive principles. Use for UI/UX screens, app flows, design systems, component selection, theming, responsive/adaptive layouts, accessibility audits, Figma-ready specifications, or developer handoff where Material Design 3 is required.

Frontend & Design12

Brand System Builder

168

amirmushichge/brand-system-skill

Guides Lovart Agent from one visual reference to a coherent brand system, campaign assets, and packaging concepts through a gated creative-direction workflow.

Frontend & Design12

Bricks

143

wpgaurav/bricks-skills

Author Bricks Builder (WordPress) layouts, templates, and full designs as paste-ready JSON. Use for any Bricks task — sections, pages, headers/footers, query loops, ACF/dynamic data, faceted filters, conditions, interactions/animations, popups, WooCommerce templates, custom elements, or hooks. Verified against Bricks 2.3.6 source.

Frontend & Design22

Frontend Design

154

Ilm-Alan/frontend-design

Build a frontend with a deliberate visual direction held through palette, typography, structure, and texture, with on-screen strings that name real information rather than fabricated demo data or filler labels. Use when building or restyling a frontend.

Frontend & Design23

HTML Anything

161

clockless-org/html-anything

Turn rich agent answers and any file, folder, URL, or export into a polished single-file HTML page. Auto-picks a default route plus 17 concrete design systems (teaching, dashboard, atlas, timeline-story, document, …).

Frontend & Design

Blcaptain Style Skill

178

dososo/blcaptain-style-skill

当用户需要把内容（文章、笔记、截图、数据、产品说明）做成中文图文卡片组图时使用——小红书 / Rednote 3:4 竖图、公众号封面、社交卡。提供三套独家视觉语言（静纸 Still Paper本手记 / Signal Proof 证据层 / Bridge Canvas 跨平台桥），由 Claude 读懂内容、自己撰写 brief.json，交给确定性引擎渲染出第一眼惊艳、一眼可辨、国内开箱即用的图文组图。

Frontend & Design16

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.