Better Icons

更好的图标

从150多个图标集合中搜索和检索200000多个图标。用作AI代理或CLI工具的MCP服务器。

快速开始

添加技能

启用 better-icons 代理环境中的CLI功能（与以下所有示例匹配）：

npx skills add better-auth/better-icons

直接CLI安装

或者，全局安装CLI以供直接非代理使用：

# Using npm
npm install -g better-icons

# Using Bun (faster)
bun add -g better-icons

______________________________________________________________________

MCP服务器（AI代理）

配置MCP服务器以启用AI编码代理中的图标工具。

npx better-icons setup

这将交互式地配置MCP服务器：

• 光标
• 克劳德代码
• 开源代码
• 帆板运动
• VS代码（副本）
• 谷歌反重力

或 手动配置.

CLI（直接使用）

使用CLI直接从终端搜索和检索图标。

# 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

为什么？

图标是人工智能辅助编码中的一个常见痛点。模型通常很难知道哪些图标可用，生成正确的SVG代码，保持一致的样式，并正确组织图标。内联SVG也会消耗不必要的令牌。

特性

• 200000多个图标 -搜索150多个图标集（Lucide、Heroicons、Material Design等）
• 自动学习 -记住您使用的图标集合，并在未来的搜索中对其进行优先级排序
• 项目同步 -图标直接写入您的图标文件(.tsx, .ts, .js)而不是将SVG粘贴到聊天中（节省令牌！）
• 批量检索 -一次获取多个图标
• 类似图标 -在不同的系列和风格中找到相同的图标
• 最近使用的图标 -快速访问您以前使用过的图标
• 多框架 -React、Vue、Svelte、Solid和原始SVG导出

手动安装

光标

添加 ~/.cursor/mcp.json:

{
  "mcpServers": {
    "better-icons": {
      "command": "npx",
      "args": ["-y", "better-icons"]
    }
  }
}

克劳德代码（CLI）

添加 ~/.claude/settings.json:

{
  "mcpServers": {
    "better-icons": {
      "command": "npx",
      "args": ["-y", "better-icons"]
    }
  }
}

谷歌反重力

添加 ~/.gemini/antigravity/mcp_config.json:

{
  "mcpServers": {
    "better-icons": {
      "command": "npx",
      "args": ["-y", "better-icons"]
    }
  }
}

MCP工具

在将MCP服务器与AI代理一起使用时，可以使用以下工具。

search_icons

在150多个图标集合中搜索图标。

Search for "arrow" icons
Search for "home" icons in the lucide collection

参数：

• query （必填）：搜索查询（例如，“箭头”、“主页”、“用户”）
• limit （可选）：最大结果（1-999，默认值：32）
• prefix （可选）：按集合筛选（例如，“mdi”、“lucide”）
• category （可选）：按类别筛选

get_icon

获取具有多种使用格式的特定图标的SVG代码。

Get the SVG for mdi:home
Get a URL for mdi:home
Get lucide:arrow-right with size 24

参数：

• icon_id （必填）：图标ID格式为“前缀：名称”（例如，“mdi:home”）
• color （可选）：图标颜色（例如，“#ff0000”、“currentColor”）
• size （可选）：图标大小（像素）
• format （可选）：“svg”（默认）或“url”

退货：

• 原始SVG代码
• React/JSX组件代码
• 图标化组件使用
• 直接SVG URL（当 format: "url")

list_collections

列出可用的图标集合/库。

List all icon collections
Search for "material" collections

参数：

• category （可选）：按类别筛选
• search （可选）：按名称搜索集合

recommend_icons

获取特定用例的图标建议。

What icon should I use for a settings button?
Recommend icons for user authentication

参数：

• use_case （必填）：描述你需要什么
• style （可选）：“实心”、“轮廓”或“任何”
• limit （可选）：建议数量（1-20）

get_icon_preferences

查看您学习到的图标集合首选项和使用统计数据。

Show my icon preferences
What icon collections do I use most?

clear_icon_preferences

重置所有已学习的图标首选项以重新开始。

Clear my icon preferences
Reset icon preferences

find_similar_icons

在不同的集合和样式中查找相似的图标或给定图标的变体。

Find icons similar to lucide:home
What other arrow icons are there like mdi:arrow-right?

参数：

• icon_id （必填）：图标ID，用于查找
• limit （可选）：相似图标的最大数量（1-50，默认值：10）

get_icons

一次获取多个图标（批量检索）。比多重更有效 get_icon 电话。

Get these icons: lucide:home, lucide:settings, lucide:user

参数：

• icon_ids （必填）：图标ID数组（最多20个）
• color （可选）：所有图标的颜色
• size （可选）：所有图标的像素大小

get_recent_icons

查看您最近使用的图标，以便快速重复使用。

Show my recent icons
What icons have I used recently?

参数：

• limit （可选）：要显示的最近图标数（1-50，默认值：20）

sync_icon

获取一个图标并自动将其添加到项目的图标文件中。添加图标的推荐方法。

Sync the lucide:home icon to my project
Add a settings icon to my icons file

参数：

• icons_file （必填）：图标文件的绝对路径
• framework （必填）：“反应”、“真空”、“细长”、“坚固”或“svg”
• icon_id （必需）：图标ID的格式为“前缀：名称”
• component_name （可选）：自定义组件名称
• color （可选）：图标颜色
• size （可选）：图标大小（像素）

退货：

• 确认图标已添加（或已存在）
• 要使用的导入语句
• 使用示例

scan_project_icons

扫描图标文件，查看哪些图标已经可用。

What icons are already in my project?
Scan my icons file

参数：

• icons_file （必填）：图标文件的绝对路径

热门图标收藏

CLI 参考

搜索图标

在150多个图标集合中搜索。

better-icons search  [options]

获取图标

检索单个图标的SVG代码。

better-icons get  [options]

图标ID格式为 prefix:name （例如。， lucide:home, mdi:arrow-right).

设置命令

better-icons setup              # Interactive setup wizard
better-icons setup -y           # Auto-confirm (global scope)
better-icons setup -s project   # Setup for current project only
better-icons config             # Show manual config instructions

发展

# Install dependencies
bun install

# Run locally
bun run dev

# Build
bun run build

许可证

麻省理工学院