Integration Logo Grid Placeholders in App Marketplaces

Why logo grids break

Integration logo grid failure modes

The first failure mode is the missing logo: an integration is added to the database before the partner submits a logo. The grid has a slot for it but no image. If the template renders an empty src, the broken image icon appears in the grid.

The second failure mode is the expired logo URL: a partner updates their brand and removes the old logo from their CDN without notifying your team. Your database still has the old URL, which now returns a 404.

The third is the wrong-size logo: a partner submits a wide banner logo (e.g., 400x120) for a square tile grid (64x64). Without server-side normalization, the image renders with incorrect aspect ratio or overflows its container.

Placeholder sizing

Standard integration logo dimensions for marketplace grids

Integration marketplace tiles most commonly use square logos. Small grid tiles are 40x40 or 48x48. Medium cards use 64x64 or 80x80. Large feature tiles use 120x120. Details pages or sidebars sometimes show 160x160.

For horizontal list views (integration name + logo in a table row), logos appear at 32x32 or 40x40. Always set explicit width and height to prevent layout shift.

<!-- Small tile logo (48x48) -->
<img
  src="https://fallback.pics/api/v1/avatar/48?text=SF"
  width="48"
  height="48"
  alt="Salesforce integration logo placeholder"
/>

<!-- Medium card logo (80x80) -->
<img
  src="https://fallback.pics/api/v1/square/80/3B82F6/FFFFFF?text=HB"
  width="80"
  height="80"
  alt="HubSpot integration logo placeholder"
/>

<!-- Feature tile (120x120) -->
<img
  src="https://fallback.pics/api/v1/square/120/7C3AED/FFFFFF?text=SL"
  width="120"
  height="120"
  alt="Slack integration logo placeholder"
/>

Monogram generation

Generate monogram placeholders from integration names

The avatar route with a two-letter initials parameter produces a monogram that serves as a recognizable identifier for the integration even without a real logo. Take the first letter of each word in the integration name (Salesforce → SF, HubSpot → HS, Google Sheets → GS).

Assign a consistent color per integration by hashing the integration name to a color index. This ensures the same integration always gets the same placeholder color—important for recognition across sessions and devices.

const PLACEHOLDER_COLORS = [
  '7C3AED', '3B82F6', '10B981', 'F97316',
  'EC4899', 'EAB308', '14B8A6', '6366F1',
];

function integrationInitials(name: string): string {
  return name
    .split(/\s+/)
    .slice(0, 2)
    .map((w) => w[0].toUpperCase())
    .join('');
}

function integrationPlaceholderUrl(name: string, size = 80): string {
  const initials = integrationInitials(name);
  const colorIndex = name.charCodeAt(0) % PLACEHOLDER_COLORS.length;
  const bg = PLACEHOLDER_COLORS[colorIndex];
  return `https://fallback.pics/api/v1/avatar/${size}/${bg}/FFFFFF?text=${initials}`;
}

onerror pattern

Fallback to monogram when real logo fails to load

Even for integrations that have submitted logos, keep the onerror fallback active to handle CDN failures and expired URLs. Generate the monogram placeholder at the same size as the real logo so there is no layout shift when the fallback triggers.

function IntegrationLogo({
  integration,
  size = 80,
}: {
  integration: { name: string; logoUrl?: string };
  size?: number;
}) {
  const fallback = integrationPlaceholderUrl(integration.name, size);
  return (
    <img
      src={integration.logoUrl ?? fallback}
      width={size}
      height={size}
      alt={`${integration.name} logo`}
      onError={(e) => {
        e.currentTarget.onerror = null;
        e.currentTarget.src = fallback;
      }}
    />
  );
}

Partner submission flow

Display placeholder during partner logo review

If your marketplace has a partner logo submission and review workflow, the integration may go live before the submitted logo clears your review queue. Display the monogram placeholder in the 'pending review' state and swap in the real logo only after it passes review.

This is preferable to hiding the integration from the grid until review completes—a missing entry is more confusing than a placeholder entry.

// Integration with logo review state
function logoSrc(integration: Integration): string {
  if (integration.logoStatus === 'approved' && integration.logoUrl) {
    return integration.logoUrl;
  }
  return integrationPlaceholderUrl(integration.name);
}

Dark mode

Dark mode logo grid considerations

Real partner logos often have transparent backgrounds designed for light mode. On a dark background they appear as white-border-free logos that may be nearly invisible. A monogram placeholder with an opaque colored background avoids this entirely.

Consider normalizing all partner logos server-side to add an opaque background before serving them, or maintain separate dark-mode logo variants. Until you have that infrastructure, the monogram placeholder is the safest option for dark mode.

Internal links

Related SaaS image and logo patterns

For related patterns on onboarding flows that feature integration logos, see the connected posts.

https://fallback.pics/docs/
https://fallback.pics/placeholder-image-api/
https://fallback.pics/blog/onboarding-screenshot-placeholders/
https://fallback.pics/blog/empty-state-images-vs-placeholders/