Back to Skills

better-icons

Use when working with icons in any project. Provides CLI for searching 200+ icon libraries (Iconify) and retrieving SVGs. Commands: `better-icons search <query>` to find icons, `better-icons get <id>` to get SVG. Also available as MCP server for AI agents.

1,012stars45forksUpdated 5/18/2026

Security Assessment

Safe(100/100)
Security Score100/100

About better-icons

The Better Icons skill provides a streamlined way to search, retrieve, and manage icons from over 200 icon libraries via Iconify. It solves the common problem of designers and developers needing to locate specific icons quickly and integrate them into projects without manually browsing multiple resources. By offering both a command-line interface (CLI) and integration as an MCP server for AI agents, this tool enables efficient access to scalable SVG icons, improving workflow for UI design, prototyping, and application development.

The skill's main features include powerful search capabilities across numerous icon collections, direct retrieval of icons in SVG format, and the ability to batch download icons with customizable color and size options. It supports popular icon collections such as Lucide, Material Design Icons (MDI), Heroicons, Tabler, Phosphor, Remix Icons, Solar, and Iconamoon. Additionally, it provides specialized tools for AI agents, including searching, getting single or multiple icons, listing collections, recommending icons based on use cases, finding similar icons, syncing icons to project files, and scanning existing project icons. TypeScript interfaces further facilitate structured API usage for integrating Better Icons into code workflows.

Better Icons is ideal for frontend developers, UI/UX designers, and AI-powered automation workflows that require dynamic icon management. It supports a variety of use cases, such as quickly finding icons for navigation menus, dashboards, websites, or mobile apps, generating style-consistent icons for projects, and automating icon retrieval in design-to-code pipelines. Its compatibility with popular JavaScript frameworks like React, Vue, Svelte, Solid, and direct SVG usage makes it versatile for modern web and application development environments.

FAQ

How do I install Better Icons for use in my project?

You can install Better Icons globally using npm (`npm install -g better-icons`) or Bun (`bun add -g better-icons`). Alternatively, you can run commands without installation using `npx` or `bunx` by prefixing each command.

Which icon libraries are supported?

Better Icons supports over 200 libraries through Iconify, including popular collections like Lucide, MDI, Heroicons, Tabler, Phosphor, Remix Icons, Solar, and Iconamoon.

Can I customize the color and size of icons?

Yes, when retrieving icons with `better-icons get` or batch downloading with `search -d`, you can specify `--color` for color and `--size` for pixel dimensions.

Is Better Icons compatible with AI agents?

Yes, it can be set up as an MCP server for AI agents, providing tools to search, retrieve, recommend, and sync icons programmatically.

Are there limits when batch retrieving multiple icons?

Yes, the `get_icons` tool supports a maximum of 20 icons per batch retrieval.

Install better-icons

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill