> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Logo

> The Fanvue brand logo.

```tsx theme={null}
import { Logo } from "@fanvue/ui";
import type { LogoColor, LogoProps, LogoSize, LogoVariant } from "@fanvue/ui";
```

## Examples

## Sizes

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-logo--sizes&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="180" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Logo — Sizes" />
</Frame>

```tsx theme={null}
import { Logo } from "@fanvue/ui";

<div className="flex flex-col items-start gap-6">
  <Logo size="16" />
  <Logo size="20" />
  <Logo size="24" />
  <Logo size="32" />
  <Logo size="40" />
  <Logo size="48" />
  <Logo size="64" />
</div>
```

## All Variants

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-logo--all-variants&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="180" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Logo — All Variants" />
</Frame>

```tsx theme={null}
import { Logo } from "@fanvue/ui";

const VARIANTS = ["full", "icon", "wordmark", "portrait"] as const;

const Row = ({
  color,
  version,
  inverted = false,
}: {
  color: "fullColour" | "decolour" | "whiteAlways" | "blackAlways";
  version: "default" | "agencies";
  inverted?: boolean;
}) => (
  <>
    <span
      className={`typography-description-12px-semibold ${
        inverted ? "text-content-primary-inverted" : "text-content-tertiary"
      }`}
    >
      {color}
    </span>
    {VARIANTS.map((variant) => (
      <Logo key={variant} variant={variant} color={color} version={version} size="40" />
    ))}
  </>
);

<div className="flex flex-col gap-10">
  {(["default", "agencies"] as const).map((version) => (
    <div key={version} className="flex flex-col gap-4">
      <h3 className="typography-body-small-14px-semibold text-content-primary capitalize">
        {version}
      </h3>
      <div className="grid grid-cols-[auto_repeat(4,minmax(0,1fr))] items-center gap-x-8 gap-y-6">
        <span />
        {VARIANTS.map((variant) => (
          <span
            key={variant}
            className="typography-description-12px-semibold text-content-tertiary"
          >
            {variant}
          </span>
        ))}
        {(["fullColour", "decolour", "blackAlways"] as const).map((color) => (
          <Row key={color} color={color} version={version} />
        ))}
      </div>
      <div className="grid grid-cols-[auto_repeat(4,minmax(0,1fr))] items-center gap-x-8 rounded-xs bg-surface-primary-inverted p-4">
        <Row color="whiteAlways" version={version} inverted />
      </div>
    </div>
  ))}
</div>
```

## Props

## Logo

The Fanvue brand logo. Supports full (icon + wordmark), icon-only, wordmark-only, and portrait (stacked) layouts with multiple colour schemes. `version="agencies"` renders the sub-brand lockup: a glossy purple icon and an "AGENCIES" label beneath the wordmark.

<ParamField path="aria-label" type="string">
  Accessible label for the logo. Required when `variant` is `"icon"` and the logo is used inside interactive contexts (links, buttons).
</ParamField>

<ParamField path="color" type="&#x22;fullColour&#x22; | &#x22;decolour&#x22; | &#x22;whiteAlways&#x22; | &#x22;blackAlways&#x22;" default="fullColour">
  Colour scheme of the logo.
</ParamField>

<ParamField path="size" type="&#x22;24&#x22; | &#x22;32&#x22; | &#x22;40&#x22; | &#x22;16&#x22; | &#x22;20&#x22; | &#x22;48&#x22; | &#x22;64&#x22;" default={"\"32\" (or \"40\" when `variant=\"icon\"`)"}>
  Height of the logo in pixels.
</ParamField>

<ParamField path="variant" type="&#x22;icon&#x22; | &#x22;full&#x22; | &#x22;wordmark&#x22; | &#x22;portrait&#x22;" default="full">
  Layout variant of the logo.
</ParamField>

<ParamField path="version" type="&#x22;default&#x22; | &#x22;agencies&#x22;" default="default">
  Sub-brand version of the logo.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `LogoColor`, `LogoProps`, `LogoSize`, `LogoVariant`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)