pixelarticons

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