Pixelarticons

1036 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

What's new

August 2026: the free set grows to 1036 icons. 159 icons move from Pro to free. The batch covers the brand icons developers ask for most (GitHub, X, Discord, Figma, Docker, Linux and more), the missing UI essentials (pause, stop, refresh, sun, sliders, dollar, percent), and their sharp, glyph and solid variants. Every icon stays MIT licensed. Browse the full set →

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 →

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). Style variants keep their suffix (heart-solid.svg → HeartSolid); the base style has none.

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

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.

Unlock all 4400+ icons

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_KEY

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

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