Gimme Icon

Semantic Icon Search Engine

Built with Next.js 16, React 19, Transformers.js, and ChromaDB.

Online Demo · Features · Tech Stack · Getting Started · Deploy Your Own

English | 简体中文

✨ Why Gimme Icon?

Traditional icon libraries (Iconify, Heroicons) force you to memorize keywords.

• Want a "search" icon? You type search.
• Want a "plus" icon? You guess: add? plus? create?

Gimme Icon changes the game. Describe what you see in your mind:

• "A downward arrow"
• "A trash can representing delete"
• "A house with a plus sign"

Understands your intent, not just your keywords.

Features

• Semantic Search: Powered by @huggingface/transformers (paraphrase-multilingual-MiniLM-L12-v2) running locally or on the edge.
• Vector Search:
  • ChromaDB: Switch to a robust vector database for production scale.
• Massive Icon Library: Aggregates 200k+ icons from 200+ collections via Iconify.
• Modern UI/UX: Built with Shadcn UI and Tailwind CSS 4 for a beautiful, responsive experience.
• Authentication: Secure GitHub OAuth integration using Better-Auth.
• Management Console: Visual backend for batch vectorization and management.

Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript 5
• Styling: Tailwind CSS 4 & Shadcn UI
• AI & Vectors:
  • Transformers.js for embedding generation
  • ChromaDB for vector storage
• Auth: Better-Auth
• Package Manager: pnpm

Deploy Your Own

You can deploy your own instance of Gimme Icon to Vercel with one click:

Getting Started

Prerequisites

• Node.js >= 20
• pnpm >= 10

Installation

1. Clone the repository

   git clone https://github.com/lexmin0412/gimme-icon.git
   cd gimme-icon

2. Install dependencies

   pnpm install

3. Configure Environment

   Copy the example environment file:

   cp .env.example .env.local

   Update .env.local with your credentials (required for Auth and optional ChromaDB).

4. Run Development Server

   pnpm dev

   Visit http://localhost:9588.

   Note: On the first launch, the app will automatically download the embedding model and generate vectors for the default icon set.

Building for Production

pnpm build
pnpm start

Project Structure

├── app/                  # Next.js App Router application directory
│   ├── api/              # API routes (auth, chroma, etc.)
│   ├── console/          # Console pages (requires permission)
│   ├── components/       # Shared components
│   └── page.tsx          # Home page
├── components/           # UI Component Library (shadcn/ui)
├── constants/            # Constant definitions
├── context/              # React Context
├── libs/                 # Third-party library initialization (auth, chroma)
├── public/               # Static assets
├── services/             # Business logic services
│   ├── embedding.ts      # Vectorization service
│   └── icons.ts          # Icon data service
└── types/                # TypeScript type definitions

License

MIT License

Acknowledgements

• Iconify - The universal icon framework.
• Lucide - Beautiful & consistent icons.
• Simple Icons - Free SVG icons for popular brands.