Logo Scaling

Compare logo sizes side by side and display your configured minimum-size guidance.

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

Usage

Show the configured mark at the built-in demonstration sizes. Set the published digital and print minimums in Logos.

<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.

<LogoScaling />

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.

<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.

<LogoScaling
  mark="brandmark"
  sizes={[
    { width: "4rem", label: "Large icon" },
    { width: "2rem", label: "Compact icon" },
  ]}
/>

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.

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

Size behavior

The built-in demonstration widths and labels are:

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