---
title: Logo Scaling
description: Compare logo sizes side by side and display your configured minimum-size guidance.
sidebar:
  order: 11
---

import previewCode from "../../snippets/logo-scaling.mdx?raw";
import defaultCode from "../../snippets/logo-scaling-default.mdx?raw";
import brandmarkCode from "../../snippets/logo-scaling-brandmark.mdx?raw";

<ComponentPreview path="logo-scaling" code={previewCode} />

## Usage

Show the configured mark at the built-in demonstration sizes.
Set the published digital and print minimums in [Logos](/logos).

```mdx
<LogoScaling />
```

## Examples

### Compare the demonstration sizes

Omit `sizes` to display the five built-in widths. Treat these as a starting point
for the layout, then publish sizes approved for your own brand.

<ComponentPreview path="logo-scaling-default" code={defaultCode} />

### Publish application sizes

Replace the demonstration sizes with the specifications your brand actually uses.
Each label is editorial copy; the component does not convert CSS lengths to print measurements.

```mdx
<LogoScaling
  sizes={[
    { width: "12rem", label: "Standard application" },
    { width: "4rem", label: "Small digital application" },
  ]}
/>
```

This is the size set shown in the opening preview. Supply sizes largest first;
the component preserves the array order rather than sorting it.

### Compare brandmark sizes

Set `mark="brandmark"` and supply widths appropriate for compact applications.
The configured minimum-size caption is shared with the logotype; it is not
calculated from these examples.

<ComponentPreview path="logo-scaling-brandmark" code={brandmarkCode} />

### Set the minimum-size guidance

Replace `brand.logo.minSize` in `brandtree.config.ts`. These descriptive strings
change the caption below every size comparison; they do not enforce widths.

```ts
minSize: { digital: "96 px wide", print: "20 mm wide" },
```

## Size behavior

The built-in demonstration widths and labels are:

| Width      | Label          |
| ---------- | -------------- |
| `18rem`    | 288 px / 49 mm |
| `11.25rem` | 180 px / 30 mm |
| `9rem`     | 144 px / 24 mm |
| `4.5rem`   | 72 px / 12 mm  |
| `2.25rem`  | 36 px / 6 mm   |

The minimum-size caption always reads `brand.logo.minSize.digital` and
`brand.logo.minSize.print`. Changing `sizes` or `mark` does not change those
values or prevent artwork from rendering below the stated minimum.

## API reference

| Prop | Type | Default | Description |
| - | - | - | - |
| `brand?` | `BrandConfig` | `props.brand` | Override the resolved brand for this component. Supplied automatically in Brandtree MDX. |
| `mark?` | `"logotype" \| "brandmark"` | `"logotype"` | |
| `sizes?` | `Array<{ width: string; label: string }>` | - | Display widths and editorial labels, in supplied order. Defaults to the five demonstration sizes listed above. |
| `class?` | `string` | - | Additional class on the outer element. |