Features

Activity Artwork

PresenceKit exposes image URLs and safe fallbacks for games, applications, and other Discord activities. An image URL may still fail when loaded; handle that in your UI.

Get URLs and fallback metadata

artwork.tstypescript

import { getActivityArtwork } from "@iconical/presencekit";

const activity = data.presence?.activities[0];
const art = getActivityArtwork(activity);

console.log(art.large); // cover/large asset URL or null
console.log(art.small); // icon URL or null
console.log(art.banner); // banner URL or null
console.log(art.source); // artwork origin or "fallback"
console.log(art.fallback.label); // e.g. "GD"

getActivityArtwork does not load images; it chooses candidate HTTPS URLs and returns metadata. artwork enrichment on a presence activity may be pending, missing, or ready. Discord's original assets remain available.

React: render and handle failures automatically

ActivityArtwork.tsxtsx

"use client";
import { ActivityArtwork } from "@iconical/presencekit/react-ui";
import type { PresenceActivity } from "@iconical/presencekit";

export function GameImage({ activity }: { activity: PresenceActivity }) {
  return <ActivityArtwork activity={activity} preferred="cover" size={64} />;
}

ActivityArtwork tries a preferred image, tries its alternate when loading fails, then shows initials such as GD. No custom image-error state or Next.js image-host configuration is needed.

Override image sources

Use an override keyed by the Discord application ID, not the Discord user ID:

overrides.tstypescript

const overrides = {
  "123456789012345678": {
    cover: "https://example.com/cover.webp",
    icon: "https://example.com/icon.webp",
    banner: "https://example.com/banner.webp",
  },
};

const art = getActivityArtwork(activity, { overrides });

custom-artwork.tsxtsx

<ActivityArtwork
  activity={activity}
  artworkOverrides={overrides}
  preferred="icon"
  size={48}
  accent="#ac1c23"
  className="rounded-lg"
/>