---

Features

📥 Import anything

• Drag-and-drop or pick files — SVG, PNG, JPG, WebP, GIF, ICO, ICNS
• Import from a URL (any image format, not just SVG)
• ICNS files are automatically unpacked to the highest-resolution frame
• Raster images wrapped as SVG for storage consistency

🗂️ Organize

• Nested collections with emoji and color labels
• Tag system with color coding
• Favorites for quick access
• Drag icons between collections in the sidebar

📤 Export

• Copy as SVG source, JSX component, or Data URI — one click
• Download as SVG or PNG at any size (16 → 128px)
• Generate a signed Storage URL for direct CDN access

🔍 Search & browse

• Fuzzy search across names and tags
• Grid and list views with virtual scrolling
• ⌘K command palette

---

Stack

---

Self-Hosting

1. Clone

git clone https://github.com/islgl/eikon.git
cd eikon
npm install

2. Create a Supabase project

Go to supabase.com, create a project, then copy your credentials.

3. Configure environment

cp .env.local.example .env.local

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# Optional — restrict sign-in to specific emails
ALLOWED_EMAILS=you@example.com

4. Initialize the database

In your Supabase SQL Editor, run:

supabase/migrations/0001_init.sql

5. Create a Storage bucket

In Supabase Storage, create a private bucket named icons, then run:

create policy "Users access own icon files" on storage.objects
  for all using (auth.uid()::text = (storage.foldername(name))[1]);

6. Run

npm run dev
# → http://localhost:3000

Deploy to Vercel

npx vercel --prod

Set the three environment variables in Vercel project settings, then redeploy.

---

Project Layout

eikon/
├── app/
│   ├── (app)/              # Protected: library, favorites, collections
│   └── auth/               # Login, callback, password reset
├── actions/                # Server Actions — icons, collections, import
├── components/
│   ├── icon-grid/          # Cards, virtual grid, empty-state dropzone
│   ├── icon-detail/        # Side panel: copy, download, metadata
│   ├── import/             # Upload + URL import dialogs
│   └── layout/             # Sidebar, collection tree, app shell, DnD
├── lib/
│   ├── hooks/              # useCollections, useIcons, useDndMove …
│   └── utils/              # SVG sanitize, image convert, copy helpers
└── supabase/
    └── migrations/         # Schema: collections, icons, tags

---

License

MIT