@2hoch1/pixel-icon-library-react

React components for the Pixel Icon Library - a set of pixelated icons that can be easily imported and used as React components.

Icons are pulled directly from @hackernoon/pixel-icon-library at build time. This ensures that every release always includes the latest upstream SVGs without requiring manual pre-generation of components.

Installation

npm install @2hoch1/pixel-icon-library-react react
yarn add @2hoch1/pixel-icon-library-react react
pnpm add @2hoch1/pixel-icon-library-react react

Usage

import {
  AdIcon, AlertTriangleSolidIcon, HeartIcon,
} from "@2hoch1/pixel-icon-library-react";

export function MyComponent() {
  return (
    <div>
      <HeartIcon size={24} />
      <AlertTriangleSolidIcon size={32} className="text-red-500" />
      <AdIcon width={48} height={48} />
    </div>
  );
}

Dynamic Icon Component

PixelIcon resolves icons dynamically at runtime from the upstream package. Unknown names or failed imports are safely ignored and render null.

import { PixelIcon } from "@2hoch1/pixel-icon-library-react";

export function DynamicExample() {
  return (
    <div>
      {/* Regular variant (default) */}
      <PixelIcon name="heart" size={24} />

      {/* Solid variant - automatically detected from name */}
      <PixelIcon name="alert-triangle-solid" size={24} />

      {/* Or specify variant explicitly */}
      <PixelIcon name="alert-triangle" variant="solid" size={24} />

      {/* Custom fallback while loading */}
      <PixelIcon name="heart" size={24} fallback={<span>...</span>} />
    </div>
  );
}

Code Splitting with Dynamic Imports

If you want to lazy load icons yourself, dynamicIconImports exposes per-icon importers:

import { Suspense, lazy, useMemo } from "react";
import dynamicIconImports from "@2hoch1/pixel-icon-library-react/dynamicIconImports";

function Icon({ name, ...props }) {
  const LazyIcon = useMemo(() => lazy(dynamicIconImports[name]), [name]);

  return (
    <Suspense fallback={<div style={{ width: 24, height: 24 }} />}>
      <LazyIcon {...props} />
    </Suspense>
  );
}

You can browse all available icons on the Pixel Icon Library website.

Credits

• Icons: Created by HackerNoon - see the original Pixel Icon Library
• React wrapper: Created by 2hoch1 - inspired by lucide-react's excellent architecture.

License

This project is licensed under the MIT License. For the icon license, please refer to the original Pixel Icon Library repository.