Icons & Names

Configure display names and icons for Rivet Actors so each instance is easy to recognize in the Rivet dashboard.

Actors can be customized with a display name and icon that appear in the Rivet dashboard. This helps identify actors at a glance when managing your application.

Configuration

Set the name and icon properties in your actor’s options:

import { actor } from "rivetkit";

const chatRoom = actor({
  options: {
    name: "Chat Room",    // Human-friendly display name
    icon: "comments",     // FontAwesome icon name
  },
  actions: {
    // ...
  }
});

Icon Formats

The icon property accepts two formats:

Emoji

Use any emoji character directly:

import { actor } from "rivetkit";

const notificationService = actor({
  options: {
    name: "Notifications",
    icon: "🔔",
  },
  // ...
});

FontAwesome Icons

Use FontAwesome icon names without the “fa” prefix:

import { actor } from "rivetkit";

const gameServer = actor({
  options: {
    name: "Game Server",
    icon: "gamepad",
  },
  // ...
});

const analyticsWorker = actor({
  options: {
    name: "Analytics",
    icon: "chart-line",
  },
  // ...
});

If no icon is specified, actors display the default actor icon, or the workflow icon for workflow actors. If no name is specified, the actor’s registry key (e.g., chatRoom, gameServer) is displayed instead.

Examples

Here are some common patterns:

import { actor } from "rivetkit";

// Chat/messaging actors
const chatRoom = actor({
  options: { name: "Chat Room", icon: "comments" },
  // ...
});

// Game-related actors
const matchmaker = actor({
  options: { name: "Matchmaker", icon: "users" },
  // ...
});

const gameSession = actor({
  options: { name: "Game Session", icon: "gamepad" },
  // ...
});

// Data processing actors
const dataProcessor = actor({
  options: { name: "Data Processor", icon: "microchip" },
  // ...
});

// Using emojis for quick identification
const alertService = actor({
  options: { name: "Alerts", icon: "🚨" },
  // ...
});

Workflow Actors

Actors that set run to a workflow display the workflow icon (diagram-project) by default. options.icon takes precedence over it:

import { actor } from "rivetkit";
import { workflow } from "rivetkit/workflow";

const orderProcessor = actor({
  options: {
    name: "Order Processor", // Shown instead of the registry key
    icon: "cart-shopping",   // Overrides the workflow icon
  },
  run: workflow(async (ctx) => {
    await ctx.step("process-order", async () => {
      // ...
    });
  }),
});

The workflow icon is applied through the registry metadata. The native runtime reads options.name and options.icon directly, so set those explicitly if you need the name or icon to appear everywhere.