Pixel Icons
226+ handcrafted pixel-art icons spanning 7 themed packs — retro charm, modern quality.
TemplatesSkip the first day of every project.
Full-page templates wired end-to-end plus section snippets ready to copy. Preview, lift the code, install the kit.
7 pages
Full-page templates
Each layout is wired end-to-end with the kit, dark + light included. Preview it, copy the source, or open the live route.
SaaS Landing Page
Complete SaaS landing composing 8 rich sections: dropdown header, centered hero, icon-grid features, testimonial cards, pricing cards, FAQ accordion, CTA banner, and multi-column footer — all with micro-interactions, tooltips, and animations.
Open
DevKitv2
Now open source▌
▌
Production-ready pixel-art React components with 226+ colorful icons, rich animations, and a full design system. Ship fast. Look legendary.
npm install @pxlkit/core
226+ icons|54 components|
MIT licensed
TypeScript-firstTree-shakeableSSR ready
Core FeaturesEverything you need to ship
A complete pixel-art design system — icons, components, animations, and utilities — all crafted to make your product stand out.
Featured
Accessible
ARIA-ready by default. Every component ships with proper roles and keyboard navigation.
Fast & Tiny
Tree-shakeable imports ensure zero unused code reaches your production bundle.
Modular Packs
Install only what you need — UI, gamification, social, weather, and more.
Framework Agnostic
Works with React, Next.js, Remix, and any component-driven framework out of the box.
Animations Built-in
Fade, bounce, float, pulse — rich animation primitives with zero extra dependencies.
Testimonials: Loved by developers
Don't take our word for it — here's what our community has to say.
Testimonials
“Pxlkit saved us weeks of design work. The retro aesthetic is iconic and our users absolutely love it. The component quality is outstanding.”
Alice JohnsonFrontend Lead · Acme Inc.
“Best component library I've used. Customers love the pixel style — it's unlike anything else out there. Shipped my SaaS in half the time.”
Bob SmithIndie Maker · PixelForge
“Finally, pixel-art UI that's actually accessible and production-ready. It's been a game changer for every project we touch.”
Carol LeeUX Designer · Studio Pixel
New plans available: Simple, transparent pricing
Pick the plan that fits your project. Upgrade or downgrade anytime — no lock-in.
Free
For side projects and experiments
$0forever
- Included: 50 pixel-art icons
- Included: 3 core packages
- Included: Community Discord support
- Included: Personal use license
- Included: 6 months of updates
MOST POPULAR
Pro
For indie devs and freelancers
$19/mo
- Included: 226+ icons across all packs
- Included: All 7 icon packs included
- Included: Email & priority support
- Included: Commercial use license
- Included: Lifetime updates
- Included: Early access to new icons
Team
For startups and growing teams
$49/mo
- Included: 226+ icons across all packs
- Included: All 7 icon packs included
- Included: Dedicated Slack channel
- Included: Multi-seat team license
- Included: Lifetime updates
- Included: Custom icon requests
30-day money-back guarantee · Cancel anytime
FAQFrequently asked questions
Everything you need to know about Pxlkit — from installation to advanced usage.
OverviewA complete pixel-art component library for React. It includes 54 UI components, 226+ handcrafted SVG icons across 7 themed packs, rich animations, a 3D voxel engine, and full TypeScript support.
Was this helpful?
LicensingCompatibility
SetupPerformance
Customization
Still have questions?
Our team typically responds within 24 hours.
Start your quest
Join ▌ developers
Join thousands of developers building pixel-perfect interfaces with production-ready retro components, icons, and animations.
5,000+ devsMIT licensed99.9% uptimePortfolio / Agency
Creative portfolio built from 7 sections: centered-logo header, parallax hero with floating icons, bento features grid, large-quote testimonial, split CTA, two-column FAQ, and CTA footer — immersive parallax effects throughout.
OpenPIXELPRO
InteractiveExperience the Pixel Universe
Parallax-ready icons, animated effects, and a complete retro design system for modern web experiences. Every icon renders in rich multi-color pixel art.
Trusted by ▌ developers
2k+ stars|
Zero dependencies|Used worldwideThe full toolkit
Icons, components, animations, and utilities — everything in one pixel-perfect package.
FlagshipPixel Icon Library
226+ handcrafted pixel icons across 7 themed packs. Available in colorful, monochrome, and animated variants — all SVG, all tree-shakeable.
WCAG AAAccessible
ARIA-ready with full keyboard navigation and screen-reader support.
New
<1kb eachBlazing Fast
Tree-shakeable ESM. Zero unused code in your production bundle.
Icons
226+
Packs
10
Components
50+
Modular
Install only the packs you need.
Searchable
Find any icon in milliseconds.
Configurable
Size, color, tone — fully yours.
“
Pxlkit saved us weeks of design work. The retro aesthetic is iconic and our users absolutely love it. The component quality is outstanding.
”AJ
Alice Johnson
Frontend Lead · Acme Inc.
1 of 3
Trusted by teams at
Acme Inc.PixelForgeStudio PixelRetroLabs
Why PxlkitLevel up your UI
Blazingly fast, tree-shakeable components with pixel-art character. No bloat — just the essentials, done right.
- Tree-shakeable — zero unused code ships to production
- 226+ handcrafted pixel-art SVG icons
- First-class TypeScript support & full SSR compatibility
- Accessible components that meet WCAG guidelines
- Active community & weekly releases
Components
50+
Downloads
12k
Icons
226+
Packages
10
#1 Pixel UI lib100% TypeScriptHelp CenterFAQ
Can't find your answer? Our support team is here to help you get unblocked.
Avg. response time: 4 hrs99% satisfaction rateGetting Started#01
What frameworks are supported?
React 18+, Next.js 13+, Vite, Remix, Astro, and any bundler that handles ESM. All components ship as ES modules with full TypeScript definitions.
Getting Started#02
Do I need Tailwind CSS?
No. Pxlkit ships its own styling system via CSS custom properties. However, Tailwind users get first-class support with a preset plugin included in the package.
Licensing#03
What does the commercial license include?
Attribution-free usage in production, priority GitHub support, access to private early-access channels, and a perpetual license with one year of updates.
Licensing#04
Can I use it in client projects?
Yes. Both the MIT and commercial licenses allow unlimited client projects. The commercial license simply removes the attribution clause.
Technical#05
Is server-side rendering supported?
Fully. Every component works in RSC and SSR environments. Animations gracefully degrade on the server and hydrate on the client with no flash.
Technical#06
How are icons delivered?
Icons are inline SVG React components — no icon fonts, no sprite sheets. Each icon is individually tree-shakeable and weighs under 1 KB gzipped.
Indie Game / Product Launch
High-energy product launch with 7 sections: simple header, split hero, alternating features, testimonial slider, toggle pricing, card CTA, and minimal footer — bold visuals and gamification icons.
OpenFull PagePreview
PreviewVoltAppv2.0 releaseGamify your Interface
Animated gamification icons, community-ready social components, and pixel-perfect feedback indicators — all built for the retro web.
ReactTypeScriptTailwind
6 icon packsi18n readyFully typed2.4k stars
Built to last
Every layer of PxlKit is designed for longevity, performance, and developer happiness.
Premium Icon Library
Icons: 226+
226+ pixel-perfect icons across 7 themed packs. Every icon available in colorful, monochrome, and animated variants.
SVGTree-shakeable
Adoption95%
Accessibility First
WCAG: AA
Full ARIA support, keyboard navigation, and screen-reader-friendly markup. Built to WCAG 2.1 AA standards.
ARIAKeyboard Nav
Adoption88%
Blazing Performance
Per icon: <1kb
Tree-shakeable ESM exports, automatic dead-code elimination, and sub-kilobyte per-icon footprint.
ESMTypeScript
Adoption92%
Animation Primitives
Animations: 8+
Fade, slide, bounce, float, pulse, zoom — composable motion building blocks with zero runtime overhead.
ReactCSS-based
Adoption78%
What devs say
Hear from developers who ship with PxlKit every day.
"Pxlkit saved us weeks of design work. The retro aesthetic is iconic and our users absolutely love it. The component quality is outstanding."
AJ
Alice Johnson
Frontend Lead · Acme Inc.
1 of 3
Choose your plan
MonthlyYearlySave 20%
Save 20%Starter
Everything you need to get started
$9/mo
- Included: 100 pixel-art icons
- Included: 5 core packages
- Included: Community support
- Included: Personal license
BEST VALUE
Pro
Best value for professionals
$29/mo
- Included: 226+ icons, all packs
- Included: All 7 icon packs included
- Included: Priority email support
- Included: Commercial license
- Included: Lifetime updates
Enterprise
For teams that need more
$79/mo
- Included: Everything in Pro
- Included: Unlimited team seats
- Included: Dedicated Slack channel
- Included: Custom icon requests
- Included: SLA & invoicing
30-day money-back guarantee · No questions asked
▌
Get early access to new components, exclusive icon packs, and behind-the-scenes updates — straight to your inbox.
No spam, everUnsubscribe anytime5k+ subscribersEnterprise / SaaS App
Enterprise-grade page with 6 sections: dropdown header, bento features, comparison pricing table, tabbed FAQ, CTA banner, and multi-column footer — data-rich layout with interactive tables and tabs.
OpenDevKitv2The full toolkit
Icons, components, animations, and utilities — everything in one pixel-perfect package.
FlagshipPixel Icon Library
226+ handcrafted pixel icons across 7 themed packs. Available in colorful, monochrome, and animated variants — all SVG, all tree-shakeable.
WCAG AAAccessible
ARIA-ready with full keyboard navigation and screen-reader support.
New
<1kb eachBlazing Fast
Tree-shakeable ESM. Zero unused code in your production bundle.
Icons
226+
Packs
10
Components
50+
Modular
Install only the packs you need.
Searchable
Find any icon in milliseconds.
Configurable
Size, color, tone — fully yours.
Compare plans
See what's included in each tier at a glance.
| Feature |  Free | ProRecommended | Team |
|---|---|---|---|
| Pixel-art icons | 50 | 226+ | 226+ |
| Icon packages | 3 | All 10 | All 10 |
| Projects | 1 | Unlimited | Unlimited |
| Commercial license | — | | |
| Priority support | — | — | |
| Lifetime updates | — | | |
| Early access | — | | |
| Custom icon requests | — | — | |
Knowledge BaseHelp Center
Browse answers by topic — click a tab to explore.
1
What makes Pxlkit different?
Pxlkit is purpose-built for pixel-art aesthetics. Unlike generic component libraries, every border, shadow, and animation is crafted for a retro feel while remaining fully accessible.
designaccessibility
2
Is Pxlkit actively maintained?
Yes. The library receives weekly updates, and the roadmap is publicly tracked on GitHub. Community contributions are welcome and reviewed promptly.
open sourcecommunity
3
Where can I see a live demo?
Visit the documentation site for interactive playground examples, copy-paste code snippets, and a full component showcase with theming controls.
docsplayground
Start your quest
Join ▌ developers
Join thousands of developers building pixel-perfect interfaces with production-ready retro components, icons, and animations.
5,000+ devsMIT licensed99.9% uptimeBlog / Content Site
Content-first blog with 7 sections: simple header, centered hero, alternating features, testimonial cards, FAQ accordion, split CTA, and CTA footer — clean typography with engaging micro-interactions.
OpenFull PagePreview
PreviewVoltAppNow open source▌
▌
Production-ready pixel-art React components with 226+ colorful icons, rich animations, and a full design system. Ship fast. Look legendary.
npm install @pxlkit/core226+ icons|54 components|MIT licensedTypeScript-firstTree-shakeableSSR readyBuilt to last
Every layer of PxlKit is designed for longevity, performance, and developer happiness.
Premium Icon Library
Icons: 226+
226+ pixel-perfect icons across 7 themed packs. Every icon available in colorful, monochrome, and animated variants.
SVGTree-shakeable
Adoption95%
Accessibility First
WCAG: AA
Full ARIA support, keyboard navigation, and screen-reader-friendly markup. Built to WCAG 2.1 AA standards.
ARIAKeyboard Nav
Adoption88%
Blazing Performance
Per icon: <1kb
Tree-shakeable ESM exports, automatic dead-code elimination, and sub-kilobyte per-icon footprint.
ESMTypeScript
Adoption92%
Animation Primitives
Animations: 8+
Fade, slide, bounce, float, pulse, zoom — composable motion building blocks with zero runtime overhead.
ReactCSS-based
Adoption78%
Testimonials: Loved by developers
Don't take our word for it — here's what our community has to say.
Testimonials“Pxlkit saved us weeks of design work. The retro aesthetic is iconic and our users absolutely love it. The component quality is outstanding.”
Alice JohnsonFrontend Lead · Acme Inc.
“Best component library I've used. Customers love the pixel style — it's unlike anything else out there. Shipped my SaaS in half the time.”
Bob SmithIndie Maker · PixelForge
“Finally, pixel-art UI that's actually accessible and production-ready. It's been a game changer for every project we touch.”
Carol LeeUX Designer · Studio Pixel
FAQFrequently asked questions
Everything you need to know about Pxlkit — from installation to advanced usage.
OverviewA complete pixel-art component library for React. It includes 54 UI components, 226+ handcrafted SVG icons across 7 themed packs, rich animations, a 3D voxel engine, and full TypeScript support.
Was this helpful?
LicensingCompatibilitySetupPerformanceCustomizationStill have questions?
Our team typically responds within 24 hours.
Why PxlkitLevel up your UI
Blazingly fast, tree-shakeable components with pixel-art character. No bloat — just the essentials, done right.
- Tree-shakeable — zero unused code ships to production
- 226+ handcrafted pixel-art SVG icons
- First-class TypeScript support & full SSR compatibility
- Accessible components that meet WCAG guidelines
- Active community & weekly releases
Components
50+
Downloads
12k
Icons
226+
Packages
10
#1 Pixel UI lib100% TypeScriptDocs Site
Reference-style docs shell with sidebar navigation, content area, and TOC — perfect for API references, technical handbooks, and knowledge bases.
OpenComponents: PixelButton
A versatile button component. Surface-aware, tone-driven, and keyboard-ready out of the box.
Installation
Add the package
The kit ships as a single ESM package. Install with the package manager of your choice.
terminalbash
npm install @pxlkit/ui-kit# orpnpm add @pxlkit/ui-kit# oryarn add @pxlkit/ui-kitUsage
Basic usage
A primary button is the default. Use it for the main action on a page.
basic.tsxtypescript
import { PixelButton } from '@pxlkit/ui-kit';export function Example() { return <PixelButton>Press Start</PixelButton>;}With tones
Map intent to a semantic tone — gold for high-stakes confirms, red for destructive paths.
tones.tsxtypescript
<PixelButton tone="gold">Continue</PixelButton><PixelButton tone="red">Delete</PixelButton>Sizes
Three sizes cover most surfaces — compact toolbars, default forms, and oversized hero CTAs.
sizes.tsxtypescript
<PixelButton size="sm">Small</PixelButton><PixelButton size="md">Medium</PixelButton><PixelButton size="lg">Large</PixelButton>Props
tone | "cyan" | "gold" | "red" | "purple" | "green" | "neutral" | "cyan" | Semantic color intent. Drives background, border, and text token. |
size | "sm" | "md" | "lg" | "md" | Controls horizontal/vertical padding and label font size. |
variant | "solid" | "outline" | "ghost" | "solid" | Fill style. Use ghost inside tight toolbars to reduce visual weight. |
disabled | boolean | false | Visually mutes the button and blocks pointer + keyboard activation. |
onClick | (event: MouseEvent) => void | — | Fired on click and on Enter/Space when the button has focus. |
Accessibility
WAI-ARIA Authoring Practices
Renders a native <button>, so Enter/Space activate it without extra wiring. focus-visible ring is on by default. Pair tone-driven colors with text labels — color alone never carries meaning.
Shop / Storefront
Storefront with product grid, filters, cart sheet, and checkout flow — ready to wire to your products and a payments provider.
OpenPXL/Shop
Featured Catalog
12 products matching your filters.
NEW
Lo-Fi Studio Headphones
Closed-back monitors tuned for late-night mixing sessions and long edits.
Pixel Field Recorder
Pocket-sized 32-bit float recorder for capturing ambient textures in the wild.
SALE
Retro Smartwatch
Monochrome OLED face, week-long battery, and pixel-perfect haptics.
CRT Bit Goggles
AR glasses with phosphor-emulated overlays for the analog-curious developer.
NEW
Tactile Switch Keyboard
65% layout, lubed linears, and PBT dye-sub keycaps in a CRT colorway.
Cable-Free Mouse Mat
Wireless charging surface that also looks like a CRT mod kit on your desk.
Hero Sections
3 variantsFull-width hero sections for landing pages — centered, split layout, and parallax.
Dark
Now open source▌
▌
Production-ready pixel-art React components with 226+ colorful icons, rich animations, and a full design system. Ship fast. Look legendary.
npm install @pxlkit/core226+ icons|54 components|MIT licensedTypeScript-firstTree-shakeableSSR readyDark
v2.0 releaseGamify your Interface
Animated gamification icons, community-ready social components, and pixel-perfect feedback indicators — all built for the retro web.
ReactTypeScriptTailwind
6 icon packsi18n readyFully typed2.4k starsDark
InteractiveExperience the Pixel Universe
Parallax-ready icons, animated effects, and a complete retro design system for modern web experiences. Every icon renders in rich multi-color pixel art.
Trusted by ▌ developers
2k+ stars|Zero dependencies|Used worldwide