Skip to content
txbrendan/ui

Pixel Icon

beta

300 original retro desktop icons, drawn on a 32-pixel grid with detailed silhouettes, beveled edges, and theme colors.

Preview

Pixel icons

300 icons · 15 categories · 32 × 32 grid

Primary color

Follows the original color.

Desktop computer

Desktop · Transparent SVG

Choose an icon below. Downloads keep your chosen palette and current theme colors.

300 icons · 1–60

sm · 32px
md · 64px
lg · 96px

Install

  1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.

    npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"

  2. 2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.

    npx shadcn@latest add @txbrendan/theme

  3. 3. Add the component.

    npx shadcn@latest add @txbrendan/pixel-icon

Use it for

  • Retro interfaces, file browsers, playful empty states, and illustrated navigation.
  • Use pixelIconCatalog for all 300 names and their 15 categories. Each icon has distinct artwork; directional and file-state variants are included.
  • Use sm at 32px, md at 64px, or lg at 96px to preserve whole pixels.
  • Use getPixelIconSvg(name, palette) to export a standalone SVG. The palette has 14 entries, including transparent at index 0. Resolve pixelIconPaints in the scoped theme before exporting; pixelIconTokens lists their source tokens. The Library block handles this conversion.
  • The complete set ships together. Use the Pixel Icon Library block to search, copy, or download individual SVGs and the full ZIP.

Avoid it for

  • Dense 16px toolbars: use Icon instead.
  • Color alone to communicate status. Pair each illustration with a label.
  • Importing the collection solely for one tiny icon when bundle size is critical.

Props

  • palette

    Optional 14-entry artwork palette, including transparency at index 0. Missing entries use the theme.

    PixelIconPalette

  • name

    One of the 300 names in pixelIconCatalog.

    PixelIconName · default "desktop-computer"

  • size

    32, 64, or 96 pixels. The underlying grid is always 32 × 32.

    "sm" | "md" | "lg" · default "md"

  • title

    Accessible name for a meaningful standalone icon. Omit when neighboring text names it.

    string

  • className

    Classes on the SVG; later classes win. Prefer whole multiples of 32px.

    string

Accessibility

  • Decorative icons are hidden from screen readers. With title, the SVG is an image with that accessible name.
  • SVGs do not take keyboard focus. A surrounding icon-only action still needs its own accessible label.
  • Artwork follows the theme. Decorative shading is not a text-contrast claim.

Examples

With a visible label

<div className="flex items-center gap-3"><PixelIcon name="folder-open" size="sm" /><span>Project files</span></div>

Standalone illustration

<PixelIcon name="desktop-computer" size="lg" title="Desktop computer" />

All available names

import { PixelIcon, pixelIconCatalog } from "@/components/ui/pixel-icon";

<div className="flex flex-wrap gap-4">{pixelIconCatalog.map(({ name }) => <PixelIcon key={name} name={name} title={name.replaceAll("-", " ")} />)}</div>