Features

Activity Artwork

Activity Artwork and Fallbacks

ℹ️

Always provide a fallback

Image URLs can be absent or fail to load. Render a monogram or placeholder instead of an empty activity card.

Discord activities do not always include game art. PresenceKit lets applications display original Discord artwork, optional service-resolved images, or a predictable fallback when neither is available.

Resolve an activity image

example.tstypescript

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

const artwork = getActivityArtwork(activity);
console.log(artwork.large);           // Preferred large image or null.
console.log(artwork.small);           // Preferred small icon or null.
console.log(artwork.banner);          // Optional banner or null.
console.log(artwork.fallback.label);  // Initials such as "EG".
console.log(artwork.source);          // Provenance for the resolved image.

The helper reads Discord's original assets, the optional normalized artwork field, and any developer override. It accepts a nullable activity value, so callers can safely use it when no game is active.

Set an application-specific override

Use your own HTTPS image, keyed by Discord application ID:

example.tstypescript

const artwork = getActivityArtwork(activity, {
  overrides: {
    "111111111111111111": {
      icon: "https://example.com/game-icon.png",
      cover: "https://example.com/game-cover.png",
      banner: "https://example.com/game-banner.png",
    },
  },
});

An override is optional; it does not alter the original Discord assets. URLs must use HTTPS. A Discord application ID is not automatically a Steam app ID.

Enriched artwork data

When available, activity.artwork can include:

example.jsonjson

{
  "icon": null,
  "cover": null,
  "banner": null,
  "source": "fallback",
  "status": "missing",
  "credit": null,
  "fallback": { "label": "EG", "style": "game" }
}

source can be discord-activity, discord-application, steamgriddb, override, or fallback. status may be ready, pending, or missing. Artwork can update separately from the initial presence snapshot.

Display a fallback in React

example.tsxtsx

import { ActivityCard } from "@iconical/presence/react-ui";

<ActivityCard
  activity={gameActivity}
  artworkOverrides={{
    "111111111111111111": { icon: "https://example.com/game-icon.png" },
  }}
/>;

ActivityCard shows a readable monogram tile when artwork is absent or the remote image fails to load. Other frameworks can use fallback.label to implement the same behavior.

Artwork questions

Attribution and reliability

Do not assume an image is available for every activity. Show a fallback rather than an empty image, and follow any applicable third-party artwork licensing or credit requirements. See Widgets for UI components and Spotify for cover artwork from listening activities.

Was this page helpful?

Features Spotify