Skip to main content

​
Installation

Install Logo Soup from npm using your preferred package manager: 
npm install @sanity-labs/logo-soup

​
Basic Usage (React)

The fastest way to get started is with the React component. Import LogoSoup and pass it an array of logos:
1

Import the component

import { LogoSoup } from "@sanity-labs/logo-soup/react";
2

Create your logo array

const logos = [
  { src: "/logos/acme.svg", alt: "Acme Corp" },
  { src: "/logos/globex.svg", alt: "Globex" },
  { src: "/logos/initech.svg", alt: "Initech" },
];
3

Render the component

function LogoStrip() {
  return <LogoSoup logos={logos} />;
}

​
Complete Example

import { LogoSoup } from "@sanity-labs/logo-soup/react";

function LogoStrip() {
  return (
    <LogoSoup
      logos={[
        { src: "/logos/acme.svg", alt: "Acme Corp" },
        { src: "/logos/globex.svg", alt: "Globex" },
        { src: "/logos/initech.svg", alt: "Initech" },
      ]}
    />
  );
}
That’s it! The <LogoSoup> component handles everything:
  • Loading and analyzing each logo
  • Detecting content boundaries
  • Normalizing sizes based on visual weight
  • Aligning logos for visual harmony
  • Rendering with proper spacing

​
Customization

You can customize the appearance and behavior with props: 
<LogoSoup
  logos={logos}
  baseSize={64}                    // Target size in pixels (default: 48)
  gap={32}                         // Space between logos (default: 28)
  alignBy="visual-center-y"        // Alignment mode (default)
  densityAware={true}              // Scale based on visual weight (default: true)
  cropToContent={false}            // Crop whitespace (default: false)
/>
See the Configuration page for all available options and their effects.

​
Using the Hook

For custom layouts, use the useLogoSoup hook directly: 
import { useLogoSoup } from "@sanity-labs/logo-soup/react";
import { getVisualCenterTransform } from "@sanity-labs/logo-soup";

function CustomGrid() {
  const { isLoading, normalizedLogos } = useLogoSoup({
    logos: ["/logo1.svg", "/logo2.svg"],
    baseSize: 48,
  });

  if (isLoading) return <div>Loading...</div>;

  return (
    <div className="flex gap-4">
      {normalizedLogos.map((logo) => (
        <img
          key={logo.src}
          src={logo.src}
          alt={logo.alt}
          width={logo.normalizedWidth}
          height={logo.normalizedHeight}
          style={{
            transform: getVisualCenterTransform(logo, "visual-center-y"),
          }}
        />
      ))}
    </div>
  );
}

​
Integration with Next.js

Use the renderImage prop to integrate with Next.js Image component: 
import Image from "next/image";
import { LogoSoup } from "@sanity-labs/logo-soup/react";

<LogoSoup
  logos={logos}
  renderImage={(props) => (
    <Image
      src={props.src}
      alt={props.alt}
      width={props.width}
      height={props.height}
    />
  )}
/>

​
What You Get

After normalization, each logo receives:
  • normalizedWidth — Computed width in pixels
  • normalizedHeight — Computed height in pixels
  • visualCenter — Coordinates for alignment (x and y offsets)
  • bounds — Original bounding box dimensions
  • density — Measured visual weight
These values ensure logos appear balanced regardless of their original dimensions or visual characteristics.

​
Other Frameworks

Logo Soup supports all major frameworks with the same simple API:

Vue

Use the useLogoSoup composable with reactive dependencies

Svelte

Use createLogoSoup with Svelte 5 runes

Solid

Use the useLogoSoup primitive with reactive tracking

Angular

Use LogoSoupService with Angular signals

jQuery

Use the $.fn.logoSoup plugin

Vanilla JS

Use the core createLogoSoup() engine directly

​
Next Steps

Configuration

Learn about all available options

React Deep Dive

Explore advanced React patterns

How It Works

Understand the normalization algorithm

API Reference

Complete API documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us