DOCSEARCHbyAlgolia
Submit Docs

pixelarticons

repository·master·Indexed 21 days ago

https://github.com/halfmage/pixelarticons

A collection of 880+ handcrafted pixel art icons drawn on a 24×24 grid. The library provides multiple integration methods, including TypeScript-ready React components, raw SVGs, a CDN via unpkg, and webfont generation. Version 2.2.0 supports tree-shaking for smaller bundles and offers an upgrade path to a full set of 4400+ icons via a license key.

Tokens
877
Snippets
6
Records
6
Agent score
24%

What's inside pixelarticons

  1. Generate and use a Webfont

    master

    You can generate font files (.ttf, .woff, .woff2, .eot, .svg) and CSS/SCSS stylesheets into the ./fonts/ directory using the following command:

    1. Run the font generation script:
    npm run font
    1. Link the generated CSS in your HTML and use the icon classes (e.g., pixel-[icon-name]):
    <link rel="stylesheet" href="fonts/pixelarticons.css" />
<i class="pixel-heart"></i>

  2. Use pixelarticons in React

    master

    Every icon is available as a ready-to-use React component with full TypeScript types. Components accept all standard SVG props such as width, height, className, style, and onClick.

    Key Details:

    • Default Size: 24×24.
    • Best Rendering: For maximum sharpness, use multiples of 24 (e.g., 24px, 48px, 72px, 96px).
    • Naming Convention: Icon names use PascalCase matching the SVG filename (e.g., alarm-clock.svg becomes AlarmClock). If a name starts with a digit, it is prefixed with Icon (e.g., 4g.svg becomes Icon4G).
    • Tree-shaking: To keep bundles small, you can import icons individually from their specific path.
    // Standard import
import { Heart, Home, Bell, Mail, Lock } from 'pixelarticons/react'

// Tree-shakeable per-icon import
import { Heart } from 'pixelarticons/react/Heart'

export default function App() {
  return (
    <div>
      <Heart width={48} height={48} />
      <Home className="text-blue-500" />
      <Bell style={{ color: 'red' }} />
    </div>
  )
}

  3. Use icons as Raw SVGs

    master

    You can use the icons as standalone SVG files located in the svg/ directory of the package.

    Option 1: Image tag Use an <img> tag to reference the file directly from node_modules.

    Option 2: Inline SVG Inline the SVG code to allow for CSS color control via fill="currentColor".

    <!-- Using img tag -->
<img src="node_modules/pixelarticons/svg/heart.svg" width="48" height="48" />

<!-- Inlining for CSS color control -->
<svg viewBox="0 0 24 24" width="48" height="48" fill="currentColor">
  <!-- paste path data from svg/heart.svg -->
</svg>

  5. Use icons via CDN (no install)

    master

    You can use any icon directly via unpkg without installing the package. Replace heart in the URL with any icon name in kebab-case (e.g., home, bell, alarm-clock).

    <img src="https://unpkg.com/pixelarticons@latest/svg/heart.svg" width="48" />

  6. Upgrade to the full 4400+ icon set

    master

    The free package includes 880 icons. If you have purchased a license, use the upgrade command to download the full set and automatically regenerate the React components.

    npx pixelarticons upgrade --key=YOUR_LICENSE_KEY