Skip to main content
Make logos look good together — Logo Soup automatically normalizes logo sizes, weights, and visual balance across any framework.

Quick Install

npm install @sanity-labs/logo-soup

Framework Support

Logo Soup works everywhere. Choose your framework:

React

Use the <LogoSoup> component or useLogoSoup hook

Vue

Use the useLogoSoup composable with full reactivity

Svelte

Use createLogoSoup with Svelte 5 runes

Solid

Use the useLogoSoup primitive for reactive state

Angular

Inject LogoSoupService with signals

jQuery

Use the $.fn.logoSoup plugin

Vanilla JS

Use the core engine directly

Custom Framework

Build your own adapter

Key Features

Content Detection

Automatically finds true content boundaries and crops whitespace

Aspect Ratio Normalization

Balances wide and tall logos using configurable scale factors

Density Compensation

Adjusts sizing so bold logos don’t overpower light ones

Visual Center Alignment

Aligns by visual weight, not geometric bounds

Client-Side Processing

No server required — runs entirely in the browser

Framework Agnostic

Works with React, Vue, Svelte, Solid, Angular, jQuery, and vanilla JS

Get Started

Quickstart

Get up and running in under 5 minutes

Configuration Options

Customize normalization behavior

How It Works

Deep dive into the algorithm

API Reference

Explore the core API

Build docs developers (and LLMs) love