880 handcrafted pixel art icons — drawn on a strict 24×24 grid, no anti-aliasing, pure <path> elements, fill="currentColor". Works with React, as raw SVGs, via CDN, or as a webfont.
July 2026 — 4,421 icons & the full alphabet. The complete A–Z now ships in three styles (plain letters, circle-framed, and square-framed), alongside new people, animals, energy, media, currency, and loader icons. 64 of the 108 new icons landed in the free set, bringing it to 880 icons. Read the full update →
npm install pixelarticonsEvery icon ships as a ready-to-use React component with full TypeScript types.
import { Heart, Home, Bell, Mail, Lock } from 'pixelarticons/react'
export default function App() {
return (
<div>
<Heart width={48} height={48} />
<Home className="text-blue-500" />
<Bell style={{ color: 'red' }} />
</div>
)
}Components accept all standard SVG props (width, height, className, style, onClick, …). The default size is 24×24. For the sharpest rendering use multiples of 24: 24px, 48px, 72px, 96px.
Tree-shakeable per-icon imports keep bundles small:
import { Heart } from 'pixelarticons/react/Heart'Icon names follow PascalCase matching their SVG filename (alarm-clock.svg → AlarmClock). Style variants keep their suffix (heart-solid.svg → HeartSolid); the base style has none.
The svg/ directory contains every icon as a standalone file — drop them directly into any project:
<img src="node_modules/pixelarticons/svg/heart.svg" width="48" height="48" />Or inline them for CSS color control:
<svg viewBox="0 0 24 24" width="48" height="48" fill="currentColor">
<!-- paste path data from svg/heart.svg -->
</svg>Use any icon directly via unpkg without installing anything:
<img src="https://unpkg.com/pixelarticons@latest/svg/heart.svg" width="48" />Replace heart with any icon name (kebab-case, e.g. home, bell, alarm-clock).
The package ships a prebuilt webfont (.woff2, .woff, .ttf, .eot, .svg) with stylesheets in CSS, Less, SCSS and Stylus. Nothing to generate:
import 'pixelarticons/fonts/pixelart-icons-font.css'One class per icon, named pixelart-icons-font- plus the icon name:
<i class="pixelart-icons-font-heart"></i>
<i class="pixelart-icons-font-alarm-clock"></i>The webfont covers the free icons. pixelarticons upgrade adds SVG files and React components, and does not rebuild the font, so Pro icons need the React or raw SVG route.
The free package includes 880 icons. If you purchased a license, run the upgrade command to unlock the full icon set:
npx pixelarticons upgrade --key=YOUR_LICENSE_KEYThis verifies your license, downloads every icon into the installed package, and regenerates the React components. Your imports do not change: pixelarticons/react and pixelarticons/svg simply resolve more icons.
You can find your license key in your Gumroad library or in the purchase confirmation email you received from Gumroad. The command needs the unzip program and network access, and it accepts keys for the Base Pro product.
Because it writes into the installed package, a clean install brings back the free set. Keep it applied by adding a postinstall script and storing the key as an environment variable or CI secret:
{
"scripts": {
"postinstall": "pixelarticons upgrade --key=$PIXELARTICONS_LICENSE_KEY"
}
}For offline builds, copy node_modules/pixelarticons/svg/*.svg into your own repository once and treat the icons as project assets. Full guide: pixelarticons.com/docs.
Contributions are welcome! See CONTRIBUTING.md for the full design rules and naming conventions. The short version:
viewBox="0 0 24 24",<path>elements only,fill="currentColor"- Paths must align to the pixel grid — no sub-pixel coordinates
- Filenames use kebab-case describing function, not appearance
Useful commands:
npm run validate # check all SVGs against design rules
npm run browser # preview all icons in a local HTML fileMIT © Gerrit Halfmann