Skip to content

sanity-labs/logo-soup

Repository files navigation

🍜 Logo Soup

npm version

A tiny framework-agnostic library that makes logos look good together.

Before

Logos without normalization — different sizes, weights, and aspect ratios create visual chaos

After

After normalization — the same logos appear balanced and harmonious

Install

npm install @sanity-labs/logo-soup

Quick Start

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" },
      ]}
    />
  );
}

Works with React, Vue, Svelte, Solid, Angular, jQuery, and vanilla JavaScript.

Resources

  • 📖 Documentation — Full API reference, framework guides, and options
  • 🎨 Storybook — Interactive playground with real logos and tunable parameters
  • 📝 The Logo Soup Problem — Deep-dive blog post on the problem and the math behind the solution

Development

bun install
bun test
bun run build
bun run storybook

License

MIT

About

normalizes and harmonizes logo visuals

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors