
技能和MCP服务器用于搜索和检索图标
概览
从150+图标集合中搜索并检索200,000+个图标。作为AI代理的MCP服务器或CLI工具。 在你的代理环境中启用 Better-icons 的 CLI 功能(与下面所有示例相符): 或者,全局安装CLI以供非代理直接使用: 配置MCP服务器,在你的AI编码代理中启用图标工具。 这会交互式地配置MCP服务器,目的是:- - - - 使用CLI直接从终端搜索和检索图标。 图标是AI辅助编码中的常见痛点。模型常常难以判断哪些图标可用,生成正确的SVG代码,保持风格一致,以及正确组织图标。内联SVG还会消耗不必要的代币。 - - 搜索150+个图标集合(Lucide、Heroicons、Material Design 等)- - 记住你使用的图标集合,并在未来搜索中优先排序- - 图标直接写入你的图标文件(.tsx、.ts、.
概述(AI 翻译)
从150+图标集合中搜索并检索200,000+个图标。作为AI代理的MCP服务器或CLI工具。
快速启动
添加技能
在您的代理环境中启用 better-icons CLI 功能(与以下所有示例相符):
直接CLI安装
或者,全局安装CLI以供非代理直接使用:
MCP服务器(AI代理)
配置MCP服务器,在你的AI编码代理中启用图标工具。
这交互式地配置MCP服务器用于:
- 光标
- 克洛德代码
- OpenCode
- 风帆冲浪
- VS 代码(副驾驶)
- 谷歌反重力
或者手动配置。
CLI(直接使用)
使用CLI直接从终端搜索和检索图标。
为什么?
图标是AI辅助编码中的常见痛点。模型常常难以判断哪些图标可用,生成正确的SVG代码,保持风格一致,以及正确组织图标。内联SVG还会消耗不必要的代币。
特色
- 200,000+ 图标 - 搜索150+图标集合(Lucide、Heroicons、材质设计等)
- 自动学习 - 记住你使用的图标集合,并在未来搜索中优先排序
本页由 AI 翻译,技术细节请以原文为准。
README
以下为原文 README 节选,完整内容请查看原文。
Better Icons
Search and retrieve 200,000+ icons from 150+ icon collections. Works as an MCP server for AI agents or CLI tool.
Quick Start
Add Skills
Enable the better-icons CLI features in your agent environment (matches all examples below):
npx skills add better-auth/better-icons
Direct CLI Installation
Alternatively, install the CLI globally for direct non-agent use:
# Using npm
npm install -g better-icons
# Using Bun (faster)
bun add -g better-icons
MCP Server (AI Agents)
Configure the MCP server to enable icon tools in your AI coding agents.
npx better-icons setup
This interactively configures the MCP server for:
- Cursor
- Claude Code
- OpenCode
- Windsurf
- VS Code (Copilot)
- Google Antigravity
CLI (Direct Usage)
Use the CLI to search and retrieve icons directly from your terminal.
# 1. Search for icons (finds icons across 150+ collections)
npx better-icons search arrow --limit 10
npx better-icons search home --prefix lucide
# 2. Get icon SVG (outputs raw code or saves to file)
npx better-icons get lucide:home > icon.svg
npx better-icons get mdi:account --color '#333' --size 24
# 3. JSON output for scripting
npx better-icons search settings --json | jq '.icons[:5]'
npx better-icons get heroicons:check --json
Why?
Icons are a common pain point in AI-assisted coding. Models often struggle to know which icons are available, generate correct SVG code, maintain consistent styles, and organize icons properly. Inline SVGs also consume unnecessary tokens.
Features
- 200,000+ Icons - Search across 150+ icon collections (Lucide, Heroicons, Material Design, etc.)
- Auto-Learning - Remembers which icon collections you use and prioritizes them in future searches
- Project Sync - Icons are written directly to your icons file (
.tsx,.ts,.js) instead of pasting SVG into chat (saves tokens!) - Batch Retrieval - Get multiple icons at once
- Similar Icons - Find the same icon across different collections and styles
- Recent Icons - Quick access to icons you’ve used before
- Multi-Framework - React, Vue, Svelte, Solid, and raw SVG exports
Manual Installation
Cursor
Add to ~/.cursor/mcp.json:
{
"mcpServers": {
"better-icons": {
"command": "npx",
"args": ["-y", "better-icons"]
}
}
}
Claude Code (CLI)
Add to ~/.claude/settings.json:
{
"mcpServers": {
"better-icons": {
"command": "npx",
"args": ["-y", "better-icons"]
}
}
}
Google Antigravity
Add to ~/.gemini/antigravity/mcp_config.json:
{
"mcpServers": {
"better-icons": {
"command": "npx",
"args": ["-y", "better-icons"]
}
}
}
MCP Tools
The following tools are available when using the MCP server with AI agents.
search_icons
安装
npx -y better-icons配置
{
"mcpServers": {
"better-icons": {
"command": "npx",
"args": ["-y", "better-icons"]
}
}
}