PXLKIT

Open-source retro React UI kit + icon library

v0.1.0Open Source53 Components211+ Icons

BUILD RETRO INTERFACES FAST

Components, pixel icons, toasts, and animations with one consistent API. Everything matches the same visual language and TypeScript-first DX.

53 components 211+ icons 6 packs React + SVG

$npm i @pxlkit/core @pxlkit/ui @pxlkit/gamification
Packs
gamification (51)feedback (28)social (43)weather (36)ui (41)effects (12)

EVERYTHING YOU NEED

A complete React UI kit with pixel art icons, animated components, toast notifications, and a visual builder — all open source.

React UI Kit

53 production-ready components: buttons, inputs, cards, modals, toasts, tables, selects, and more. Fully typed.

Pixel Perfect Icons

211+ hand-crafted 16×16 SVG icons across 6 thematic packs. Tree-shakeable — bundle only what you use.

Animated Icons

Frame-based animations with loop, ping-pong, hover trigger, and speed control. Fire swords, sparkles, and more.

Toast Notifications

Built-in retro notification system with animated icons, progress bars, 6 positions, and smooth stacking.

Visual Builder

Paint-style pixel editor with retro palettes, tools, undo/redo, and live code preview. Design in the browser.

AI-Friendly Format

Simple grids + color palettes. Perfect for LLM icon generation with ChatGPT, Claude, or any AI model.

ICON PACKS

211 hand-crafted icons across 6 themed packs — including animated effects.

Gamification

51 icons
trophy
star
sword
shield
heart
coin
crown
lightning
+43more

Feedback

28 icons
check-circle
x-circle
info-circle
warning-triangle
error-octagon
bell
+22more

Social

43 icons
heart
heart-broken
thumbs-up
thumbs-down
user
user-group
+37more

Weather

36 icons
sun
moon
cloud
cloud-sun
rain
snow
+30more

UI

41 icons
pencil
eraser
paint-bucket
eyedropper
play
+36more

Effects

12 icons
explosion-burst
radar-ping
flame
glow-pulse
pixel-rain
shockwave
+6more

PIXEL TOASTS

Retro-styled notifications with pixel art icons, animated progress bars, configurable positions, and smooth stacking. Click to try them live.

SAVED

Your changes have been saved

ERROR

Could not connect to server

NEW UPDATE

Pxlkit v2.0 is now available

LOW STORAGE

Only 12MB remaining — clean up soon

HOW IT WORKS

Icons are defined as simple character grids. Each character maps to a color. That's it.

trophy.ts — Icon Definition
import type { PxlKitData } from '@pxlkit/core';

export const Trophy: PxlKitData = {
  name: 'trophy',
  size: 16,
  category: 'gamification',
  grid: [
    '................',
    '..GGGGGGGGGGGG..',
    '.GG.YYYYYYYY.GG.',
    '.G..YYYYYYYY..G.',
    '.G..YYYWYYYY..G.',
    '.GG.YYYYYYYY.GG.',
    '..GGGGGGGGGGGG..',
    '....GGGGGGGG....',
    '.....GGGGGG.....',
    '......GGGG......',
    '......GGGG......',
    '.....DDDDDD.....',
    '....DDDDDDDD....',
    '....BBBBBBBB....',
    '...BBBBBBBBBB...',
    '................',
  ],
  palette: {
    'G': '#FFD700',  // Gold
    'Y': '#FFF44F',  // Yellow highlight
    'D': '#B8860B',  // Dark gold
    'B': '#8B4513',  // Brown base
    'W': '#FFFFFF',  // White shine
  },
  tags: ['trophy', 'achievement'],
};
App.tsx — Usage
import { PxlKitIcon } from '@pxlkit/core';
import { Trophy } from '@pxlkit/gamification';

// Colorful rendering
<PxlKitIcon icon={Trophy} size={32} colorful />

// Monochrome (inherits text color)
<PxlKitIcon icon={Trophy} size={32} />

// Custom monochrome color
<PxlKitIcon icon={Trophy} size={48} color="#FF0000" />

Live Preview:

Trophy
Heart
Sun
Bell
Animated
mono

AI GENERATION

The grid format is designed to be generated by AI. Copy the prompt template, ask any LLM, and paste the result here.

Static Prompt Template

Generate a pixel art icon in this exact JSON format.
You can choose 8x8, 16x16, 24x24, 32x32, 48x48, or 64x64.

{
  "name": "icon-name",
  "size": 16,
  "category": "your-category",
  "grid": [
    "................",
    "................",
    "......AABB......",
    ".....AACCBB.....",
    "....AACCCCBB....",
    "....ACCCCCCB....",
    "....ACCDDCCB....",
    "....ACCDDCCB....",
    "....ACCCCCCB....",
    "....AACCCCBB....",
    ".....AACCBB.....",
    "......AABB......",
    "................",
    "................",
    "................",
    "................"
  ],
  "palette": {
    "A": "#1E40AF",
    "B": "#3B82F6",
    "C": "#60A5FA",
    "D": "#FFFFFF"
  },
  "tags": ["example", "orb"]
}

Rules:
- Grid must have exactly N rows of N characters (matching "size")
- "." means transparent (empty pixel)
- Each non-"." character must appear in the palette
- Use 3-6 colors max for clean pixel art
- Think in terms of pixels on a grid

Create a [DESCRIBE YOUR ICON HERE] icon.

Paste AI Output

START BUILDING TODAY

Pxlkit is free and open source. Use the UI kit and icons in your products, contribute icons, or help grow the component library.