Pixelarticons

800 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.

• 🌐 Browse all icons
• 🎨 Figma community file

---

Installation

npm install pixelarticons

---

Usage

React

Every 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). Icons whose names start with a digit are prefixed with Icon (e.g. 4g.svg → Icon4G).

---

Raw SVG

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>

---

CDN (no install)

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).

---

Webfont

Generate .ttf, .woff, .woff2, .eot, .svg fonts plus CSS/SCSS stylesheets into ./fonts/:

npm run font

Link the generated CSS and use icon classes in HTML:

<link rel="stylesheet" href="fonts/pixelarticons.css" />
<i class="pixel-heart"></i>

---

Unlock all 2000+ icons

The free package includes 800 icons. If you purchased a license, run the upgrade command to unlock the full icon set:

npx pixelarticons upgrade --key=YOUR_LICENSE_KEY

This verifies your license, downloads all icons into your local svg/ directory, and automatically regenerates the React components — no extra setup needed.

You can find your license key in your Gumroad library or in the purchase confirmation email you received from Gumroad.

---

Contributing

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 file

---

Links

• Website
• Instagram
• NPM
• GitHub Issues

---

MIT © Gerrit Halfmann