@plannotator/dither-icons

The shared dithered icon family for Plannotator products. It ships one small React component and a framework-neutral Canvas painter. It has no stylesheet, font, image, or runtime dependency; React is a peer only.

The package source is ready for Plannotator, Workspaces, AppNotes, and other browser surfaces. It has not been published to npm yet.

React

import { DitherIcon } from "@plannotator/dither-icons";

export function Teammates() {
  return (
    <DitherIcon
      subject="person"
      treatment="filled"
      variant="b"
      size={48}
      animated
      label="Two teammates"
    />
  );
}

animated is opt-in. Living icons pause when they leave the viewport or the tab is hidden, and they become still when the user prefers reduced motion.

Decorative icons should be explicit:

<DitherIcon subject="appnotes" treatment="outline" decorative />

Plain HTML or another framework

import { paintDitherIcon } from "@plannotator/dither-icons/canvas";

const canvas = document.querySelector("canvas");
if (canvas instanceof HTMLCanvasElement) {
  paintDitherIcon(canvas, {
    icon: "workspaces",
    treatment: "filled",
    variant: "a",
    color: [198, 139, 31],
  });
}

The painter resets the canvas to a 32×32 internal pixel grid. Set its CSS width and height to display it at any size with image-rendering: pixelated.

Subjects

Every subject has outline and filled treatments plus A and B compositions:

person, plans, documents, code-review, appnotes, workspaces, artifacts, files, comments, versions, and references.

DITHER_ICON_SPECS exposes the catalog labels and default Plannotator colors. Pass an RGB tuple through color to override one icon without a stylesheet.

Local consumers

Inside this monorepo, use the workspace dependency:

{
  "dependencies": {
    "@plannotator/dither-icons": "workspace:*"
  }
}

After the owner publishes the package, external products install the released version from npm. Publishing is deliberately separate from this implementation.