@interhuman/dot-matrix-icons

Animated dot matrix icons for Interhuman AI projects. Zero runtime dependencies — just React.

Install

npm install @interhuman/dot-matrix-icons

Usage

Animated icon (React component)

import { DotMatrixIcon, aiTutoring } from "@interhuman/dot-matrix-icons";

export function Example() {
  return (
    <DotMatrixIcon
      dots={aiTutoring.dots}
      animation={aiTutoring.animation}
      activeColor="#757575"
      cellSize={8}
    />
  );
}

Hover over the icon to trigger the animation. Each icon has a unique animation assigned.

Render all use-case icons

import { DotMatrixIcon, useCaseIcons } from "@interhuman/dot-matrix-icons";

export function IconGrid() {
  return (
    <div style={{ display: "flex", gap: 24 }}>
      {useCaseIcons.map((icon) => (
        <DotMatrixIcon
          key={icon.id}
          dots={icon.dots}
          animation={icon.animation}
          label={icon.name}
        />
      ))}
    </div>
  );
}

Static SVG string

For SSR, OG images, favicons, or email:

import { renderToSVG, healthcareSupport } from "@interhuman/dot-matrix-icons";

const svg = renderToSVG(healthcareSupport.dots, {
  activeColor: "#757575",
  size: 64,
});

Available icons

Use Cases

| Export | Name | Animation | |---|---|---| | salesCoaching | Sales Coaching | sweep-up | | aiTutoring | AI Tutoring | ripple | | customerService | Customer Service | flow | | meetingCopilots | Meeting Copilots | orbit | | aiInterviews | AI Interviews | dialogue | | virtualAssistants | Virtual Assistants | breathe | | healthcareSupport | Healthcare Support | heartbeat |

Props

| Prop | Type | Default | Description | |---|---|---|---| | dots | SizedDot[] | required | The icon's dot data | | animation | string | undefined | Animation key (falls back to radial reveal) | | cellSize | number | 8 | Size of each grid cell in px | | activeColor | string | "currentColor" | Dot fill color | | animated | boolean | true | Enable hover animations | | label | string | undefined | Text label below the icon | | className | string | undefined | Class on the wrapper element | | style | CSSProperties | undefined | Inline styles on the wrapper element | | onClick | () => void | undefined | Click handler |

Accessibility

Animations are automatically skipped when the user has prefers-reduced-motion: reduce enabled in their OS settings.

Adding new icons

New icon data can be generated by AI (e.g., Claude) following the existing pattern: an 8x8 grid where each active dot has a size tier (1 = small accent, 2 = medium, 3 = large dominant). Pass any valid DotMatrixIconData to the component.