New Skill: Better Icons - Search 200,000+ Icons in AI-Assisted Workflows
We’ve added a new development skill to the directory: Better Icons from the better-auth team. This skill addresses a common pain point in AI-assisted coding: finding and using the right icons.
The Problem
Icons are a frequent source of friction when working with AI coding assistants. Models often struggle to:
- Know which icons are available in your project
- Generate correct SVG code
- Maintain consistent styles across your codebase
- Organize icons properly in your project structure
Better Icons solves these problems by providing direct access to an extensive icon library with intelligent features designed for AI workflows.
What Better Icons Offers
Massive Icon Library
Search across 200,000+ icons from 150+ collections including:
- Lucide - Popular open-source icon set
- Heroicons - Icons from the Tailwind team
- Material Design Icons - Google’s comprehensive icon system
- And many more - FontAwesome, Phosphor, Tabler, etc.
Smart Learning
Better Icons remembers which icon sets you prefer and prioritizes them in future searches. If you consistently use Lucide icons, they’ll appear first in your results.
Framework Exports
Get icons in the format you need:
- React - JSX components
- Vue - Vue components
- Svelte - Svelte components
- Solid - Solid components
- Raw SVG - Plain SVG markup
Developer-Friendly Features
- Batch operations - Retrieve multiple icons at once
- Project integration - Writes icons directly to your files instead of cluttering chat history
- Discovery tools - Find similar icons across collections
- Usage history - Access recently used icons quickly
How It Works
Better Icons functions as both an MCP (Model Context Protocol) server for AI agents and a command-line interface. This means you can:
- Use it directly with Claude Code as a skill
- Configure it with other AI coding tools (Cursor, Windsurf, VS Code)
- Run it from the terminal for quick lookups
Use Cases
This skill is useful for:
- Frontend development - Quickly add icons to React, Vue, or Svelte projects
- Design system work - Maintain consistency across icon usage
- Prototyping - Find the right icon without leaving your editor
- Documentation - Add visual indicators to README files and docs
Get Started
Browse the Better Icons skill in the directory to see installation instructions and capabilities. For detailed documentation, visit the GitHub repository.