BA

better-auth/better-icons

Developer tools

このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る

1445 stars 62 forks 品質 74 トレンド 26MIT

アイコンの検索と取得のためのスキルと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

Or configure manually.

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

GitHub で README 全文を見る

インストール

npx -y better-icons
MCP 初心者?mcpskill.org のガイドから始めましょう →

設定

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