# Pixelarticons

> 4110 pixel art icons designed on a 24x24px grid. Deliberately pixelated icons for modern web design.

## About

Pixelarticons is a comprehensive icon library featuring 4110 hand-crafted pixel art icons across 4 style variants. Created by Gerrit Halfmann (@halfmage), the project started in 2014 with a vision to bring pixel art aesthetics to modern interface design. 816 icons are free, the full set is available via a Pro license.

- [Website](https://pixelarticons.com): Browse and search all 4110 icons.
- [Pricing](https://pixelarticons.com/pricing/): Free vs Pro license comparison.
- [Buy Pro](https://halfmage.gumroad.com/l/pixelarticons): One-time license for the full set.
- [Creator](https://halfmage.com): Gerrit Halfmann (@halfmage).
- [GitHub](https://github.com/halfmage/pixelarticons): Open-source repository for the free icons.
- [npm](https://www.npmjs.com/package/pixelarticons): Install the free package.
- [Figma](https://www.figma.com/community/file/952542622393317653/pixelarticons-free): Free community file.

## Icon Styles

Most icons come in up to four style variants, split along two axes: outline vs filled, and rounded vs sharp corners. See the full comparison at [Icon Styles](https://pixelarticons.com/styles/).

- **Base**: Outline style with softly rounded (beveled) pixel corners. The original, all-purpose default.
- **Sharp**: Outline style with hard 90-degree corners. Rigid and technical; suits developer tools and retro UIs.
- **Solid**: Filled silhouette with rounded corners. Higher visual weight; good for active states and emphasis.
- **Glyph**: Filled silhouette with hard 90-degree corners. The boldest, blockiest style; best at very small sizes.

## Technical Specifications

- **Grid Size**: 24x24 pixels
- **Total Icons**: 4110 icons across all styles (1389 base icons × up to 4 variants)
- **Free Icons**: 816 icons available via npm
- **Scaling**: Must scale in multiples (12px, 24px, 48px, 72px, 96px) to maintain crisp pixel edges
- **Formats Available**: SVG (source), PNG (preview)
- **Install**: `npm install pixelarticons`

## Usage Guidelines

1. Scale only in multiples of the base size (24px)
2. Disable anti-aliasing/smoothing when displaying
3. For CSS: use `image-rendering: pixelated`
4. Icons work best on light or dark solid backgrounds

## Categories

Icons are organized into 18 categories (counts are base icons, before style variants):
- **System & Devices** (196 icons): Hardware, screens, peripherals and connectivity
- **Office & Editing** (159 icons): Documents, files, folders, calendars and workplace tools
- **Commerce** (137 icons): Shopping, payments, retail and gifts
- **Design** (133 icons): Creative tools, editing, alignment and color
- **Arrows** (104 icons): Directions, chevrons, sorting and movement
- **Media** (89 icons): Audio, video, photography and playback controls
- **Math & Finance** (72 icons): Money, cards, banking and transactions
- **Weather & Nature** (70 icons): Weather, plants, animals and food
- **Brands** (68 icons): Company, app and product logos
- **Communication** (67 icons): Mail, chat, messaging and contact
- **Development** (58 icons): Code, terminals, debugging and version control
- **People** (44 icons): Users, profiles, teams and expressions
- **Time** (41 icons): Clocks, calendars, alarms and scheduling
- **Maps & Travel** (40 icons): Maps, places, transport and directions
- **Health & Wellness** (38 icons): Medical, fitness and wellbeing
- **Games** (36 icons): Controllers, gaming and arcade
- **Security & Warnings** (25 icons): Locks, shields, keys and authentication
- **Education** (12 icons): Books, learning and study

## Machine-Readable Data

- [Icon catalog (JSON)](https://pixelarticons.com/icons.json): Full metadata for every icon.
- [Icon name list (TXT)](https://pixelarticons.com/icons.txt): Plain-text list of all base icon names.
- [Extended context](https://pixelarticons.com/llms-full.txt): Full llms.txt with the complete icon list.
- Individual icon pages: `https://pixelarticons.com/icon/{icon-name}/`
- Category pages: `https://pixelarticons.com/category/{category-name}/`

## Integration

Works with any web framework or design tool:
- HTML/CSS (img tags or inline SVG)
- React components: `import { Heart } from 'pixelarticons/react'`
- npm: `npm install pixelarticons`
- Figma community file available
- Any platform supporting SVG

## License

- Free version: 816 icons for personal and commercial use (MIT)
- Pro version: All 4110 icons with SVG source and commercial license