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 — React (Next.js) code; the components also exist for Vue and Angular. 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 sourceBuild retro UIs
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|111 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 icon imports: the icons you do not use never reach your production bundle.
Modular Packs
Install only what you need — UI, gamification, social, weather, and more.
React First, Vue & Angular Too
Works with Next.js, Vite, and Remix; Vue and Angular editions of the same kit since 2.2.
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 retro pixel-art component library for React — now also for Vue and Angular. It includes 111 UI components, 226+ handcrafted SVG icons across 7 themed packs, rich animations, and full TypeScript support.
Was this helpful?
LicensingCompatibility
SetupPerformance
Customization
Still have questions?
Our team typically responds within 24 hours.
Start your quest
Join 5,000+ 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 3,200+ 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 icons: unused ones never reach your production bundle.
Icons
226+
Packs
7
Components
111
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
Accessible components and tree-shakeable icons with pixel-art character. No bloat — just the essentials, done right.
- Tree-shakeable icons — unused ones never ship
- 226+ handcrafted pixel-art SVG icons
- First-class TypeScript support & full SSR compatibility
- Accessible components built for WCAG 2.1 AA
- Open source, with regular 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.2+ or 19 — Next.js, Vite, Remix — and, new in 2.2, Vue 3.5+ and Angular 20–22 with their own editions of the kit. Every package ships ES modules with TypeScript definitions.
Getting Started#02
Do I need Tailwind CSS?
Yes, Tailwind CSS v4. The kit's stylesheet is a Tailwind entry point: add Tailwind's Vite or PostCSS plugin to your build and import the stylesheet in place of `@import "tailwindcss"`.
Licensing#03
What does the commercial license include?
The icons without attribution — in one product with Indie, in unlimited products with Team, which adds future icon packs and priority support. One-time payment, lifetime license.
Licensing#04
Can I use it in client projects?
Yes. The MIT code works in any number of client projects. For the icons without attribution, Indie covers one project and Team unlimited ones.
Technical#05
Is server-side rendering supported?
Yes. The components render on the server and hydrate without mismatches — in Next.js, Nuxt and Angular SSR. In the Next.js App Router they run as Client Components.
Technical#06
How are icons delivered?
Icons render as crisp SVG images — no icon fonts, no sprite sheets — and each one is tree-shakeable.
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
WAI-ARIA roles, keyboard navigation, and screen-reader-friendly markup. Built for WCAG 2.1 AA.
ARIAKeyboard Nav
Adoption88%
Blazing Performance
Per icon: <1kb
Tree-shakeable icon packs: bundlers drop the icons you do not import, and each icon weighs under a kilobyte.
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
Join the adventure
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 icons: unused ones never reach your production bundle.
Icons
226+
Packs
7
Components
111
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 staying accessible.
designaccessibility
2
Is Pxlkit actively maintained?
Yes. Releases ship regularly — the changelog lists every one — and issues and contributions are welcome on GitHub.
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 5,000+ 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 sourceBuild retro UIs
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|111 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
WAI-ARIA roles, keyboard navigation, and screen-reader-friendly markup. Built for WCAG 2.1 AA.
ARIAKeyboard Nav
Adoption88%
Blazing Performance
Per icon: <1kb
Tree-shakeable icon packs: bundlers drop the icons you do not import, and each icon weighs under a kilobyte.
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 retro pixel-art component library for React — now also for Vue and Angular. It includes 111 UI components, 226+ handcrafted SVG icons across 7 themed packs, rich animations, and full TypeScript support.
Was this helpful?
LicensingCompatibilitySetupPerformanceCustomizationStill have questions?
Our team typically responds within 24 hours.
Why PxlkitLevel up your UI
Accessible components and tree-shakeable icons with pixel-art character. No bloat — just the essentials, done right.
- Tree-shakeable icons — unused ones never ship
- 226+ handcrafted pixel-art SVG icons
- First-class TypeScript support & full SSR compatibility
- Accessible components built for WCAG 2.1 AA
- Open source, with regular 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 | "green" | "cyan" | "gold" | "red" | "purple" | "pink" | "neutral" | "green" | Semantic color intent. Drives background, border, and text token. |
size | "sm" | "md" | "lg" | "md" | Controls horizontal/vertical padding and label font size. |
variant | "solid" | "soft" | "ghost" | "outline" | "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 sourceBuild retro UIs
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|111 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 3,200+ developers
2k+ stars|Zero dependencies|Used worldwide