![Pixelarticons Cover](cover.jpg "Pixelarticons Cover")

# Pixelarticons

[![npm version](https://img.shields.io/npm/v/pixelarticons.svg?color=black&label=npm&style=flat-square)](https://www.npmjs.com/package/pixelarticons)
[![npm downloads](https://img.shields.io/npm/dt/pixelarticons.svg?color=black&style=flat-square)](https://www.npmjs.com/package/pixelarticons)
[![License: MIT](https://img.shields.io/badge/license-MIT-black.svg?style=flat-square)](LICENSE)

**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](https://pixelarticons.com)
- [🎨 Figma community file](https://www.figma.com/community/file/952542622393317653/Pixelarticons)

---

## 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 →](https://pixelarticons.com)

**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 →](https://pixelarticons.com/updates/4421-icons-alphabet/)

---

## Installation

```bash
npm install pixelarticons
```

---

## Usage

### React

Every icon ships as a ready-to-use React component with full TypeScript types.

```jsx
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:

```jsx
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:

```html
<img src="node_modules/pixelarticons/svg/heart.svg" width="48" height="48" />
```

Or inline them for CSS color control:

```html
<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](https://unpkg.com) without installing anything:

```html
<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:

```js
import 'pixelarticons/fonts/pixelart-icons-font.css'
```

One class per icon, named `pixelart-icons-font-` plus the icon name:

```html
<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:

```bash
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:

```json
{
  "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](https://pixelarticons.com/docs/).

---

## Contributing

Contributions are welcome! See [CONTRIBUTING.md](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:**

```bash
npm run validate   # check all SVGs against design rules
npm run browser    # preview all icons in a local HTML file
```

---

## Links

- [Website](https://pixelarticons.com)
- [Instagram](https://www.instagram.com/pixelarticons/)
- [NPM](https://www.npmjs.com/package/pixelarticons)
- [GitHub Issues](https://github.com/halfmage/pixelarticons/issues)

---

MIT © [Gerrit Halfmann](https://github.com/halfmage)