{ "name": "icons0", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev --turbopack", "build": "next build", "start": "next start", "lint": "eslint", "seed": "bun run src/lib/db/seed.ts", "seed:embeddings": "bun run src/lib/db/seed-embeddings.ts" }, "dependencies": { "@ai-sdk/gateway": "^3.0.46", "@ai-sdk/google": "^3.0.29", "@iconify/utils": "3.1.0", "@modelcontextprotocol/sdk": "1.26.0", "@vercel/analytics": "^1.6.1", "ai": "^6.0.86", "better-auth": "^1.4.18", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", "drizzle-orm": "0.45.1", "geist": "^1.7.0", "lucide-react": "^0.564.0", "mcp-handler": "^1.1.0", "motion": "^12.34.0", "next": "16.2.12", "postgres": "^3.4.8", "radix-ui": "^1.4.3", "react": "19.2.8", "react-dom": "19.2.8", "sonner": "^2.0.7", "tailwind-merge": "^3.4.1", "web-haptics": "^0.0.6", "zod": "4.3.6" }, "devDependencies": { "@iconify/json": "2.2.439", "@iconify/types": "2.0.0", "@tailwindcss/postcss": "^4", "@types/bun": "^1.3.9", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "drizzle-kit": "0.31.9", "eslint": "^9", "eslint-config-next": "16.2.12", "shadcn": "^3.8.4", "tailwindcss": "^4", "tw-animate-css": "^1.4.0", "typescript": "^5" }, "ignoreScripts": [ "sharp", "unrs-resolver" ], "trustedDependencies": [ "sharp", "unrs-resolver" ] }

icons0

Search 200k+ icons from 150+ open-source collections. Use the web UI or connect your AI agent via MCP.

Built with Next.js, mcp-handler, Turso (libSQL), Drizzle ORM, and Gemini embeddings.

Features

• Hybrid search — FTS5 keyword matching + semantic vector search, combined with Reciprocal Rank Fusion
• MCP server — Four tools (search-icons, get-icon, list-collections, list-licenses) for AI agents
• shadcn registry — Install any icon as a standalone React component via npx shadcn add
• Zero runtime dependency on icon packages — All 200k+ icon SVGs are stored in the database at seed time; @iconify/json (395 MB) is a devDependency only
• React component output — Get typed, copy-paste-ready React components from any icon
• Batch retrieval — Fetch up to 20 icons in a single request

Getting started

Prerequisites

• Bun (v1.1+)
• A Turso database
• (Optional) A Google AI API key for semantic search embeddings

Environment variables

TURSO_DATABASE_URL=libsql://your-db.turso.io
TURSO_AUTH_TOKEN=your-token
GOOGLE_API_KEY=your-key          # optional, for semantic search

Install and seed

# Install dependencies
bun install

# Seed the database with icons from @iconify/json
bun run seed

# (Optional) Generate vector embeddings for semantic search
bun run seed:embeddings

Run

# Development (with Turbopack)
bun run dev

# Production
bun run build && bun run start

The app starts at http://localhost:3000. The MCP endpoint is at /mcp.

MCP tools

Connect any MCP-compatible client to the /mcp endpoint. Four tools are available:

search-icons

Search icons by keyword or browse a collection.

{ "query": "arrow left" }
{ "query": "home", "collection": "lucide" }
{ "collection": "tabler", "category": "Navigation" }

get-icon

Retrieve icons as SVG or React components.

{ "name": "lucide:home" }
{ "name": "lucide:home", "format": "react" }
{ "name": ["mdi:home", "lucide:home", "tabler:home"] }

list-collections

Discover available icon collections, optionally filtered by category or name.

{ "category": "Emoji" }
{ "search": "material" }

list-licenses

List all unique licenses across collections with icon counts.

shadcn registry

Install any icon directly into your project as a standalone React component — no icon library dependency required:

# Single icon
npx shadcn@latest add https://i0-phi.vercel.app/r/lucide:home.json

# Multiple icons
npx shadcn@latest add https://i0-phi.vercel.app/r/lucide:home.json https://i0-phi.vercel.app/r/lucide:arrow-right.json

# Entire collection
npx shadcn@latest add https://i0-phi.vercel.app/r/lucide.json

import { LucideHome } from "@/components/icons/lucide-home";

Architecture

src/
├── app/
│   ├── page.tsx              # Landing page with search UI
│   ├── mcp/route.ts          # MCP endpoint (mcp-handler)
│   ├── r/[name]/route.ts     # shadcn registry endpoint
│   └── components/           # UI components
├── lib/
│   ├── db/
│   │   ├── schema.ts         # Drizzle table definitions
│   │   ├── connection.ts     # Turso client + Drizzle instance
│   │   ├── seed.ts           # Seed DB from @iconify/json
│   │   └── seed-embeddings.ts
│   └── icons/
│       ├── search.ts         # Hybrid FTS5 + semantic search
│       ├── svg.ts            # SVG rendering via @iconify/utils
│       ├── react.ts          # SVG → React component conversion
│       └── queries.ts        # Web UI database queries
├── tools/                    # MCP tool handlers
├── prompts/                  # MCP agent prompts
└── resources/                # MCP resources

Database

Hosted on Turso (libSQL). Two main tables:

• collections — 223 icon collections with metadata (author, license, category, samples)
• icons — 303k+ icons with SVG body, dimensions, tags, and optional 256-dimensional embeddings

Search is powered by:

1. icons_fts — FTS5 virtual table with porter stemming for keyword search
2. icons_embedding_idx — DiskANN vector index for semantic similarity search

Search pipeline

1. Query is sanitized and tokenized (porter stemmer, prefix matching)
2. FTS5 and vector search run in parallel
3. Results are merged using Reciprocal Rank Fusion (RRF)
4. Filters (collection, category, license) are applied at query time

If embeddings haven't been seeded, search gracefully falls back to FTS5 only.

Scripts

Tech stack

• Next.js 16 — App Router, React Server Components
• mcp-handler — Vercel's MCP adapter for Next.js route handlers
• Turso — libSQL database with vector search
• Drizzle ORM — Type-safe SQL
• Gemini — gemini-embedding-001 for 256-d icon embeddings
• @iconify/utils — SVG rendering from icon data
• Tailwind CSS 4 — Styling
• shadcn/ui — UI components
• better-auth — Authentication

License

MIT © Marco Ripa