
better-auth/better-icons
Developer toolsこのページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る
アイコンの検索と取得のためのスキルとMCPサーバー
概要
150+のアイコンコレクションから200,000+のアイコンを検索し取得できます。AIエージェントのMCPサーバーやCLIツールとして機能します。 エージェント環境でより良いアイコンの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コード(コパイロット)
- GoogleでAntigravity
手動で設定することもできます。
CLI(直接使用)
CLIを使って、ターミナルから直接アイコンを検索し取得できます。
なぜ?
アイコンはAI支援コーディングにおける一般的な課題です。モデルはどのアイコンが利用可能かを把握し、正しいSVGコードを生成し、一貫したスタイルを維持し、アイコンを適切に整理することに苦労することが多いです。インラインSVGは不要なトークンも消費します。
特徴
- 200,000+ アイコン - 150+のアイコンコレクション(Lucide、Heroicons、Material Designなど)を検索
- 自動学習 - どのアイコンコレクションを記憶し、今後の検索で優先順位をつけるか
このページは 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"]
}
}
}