Logo

Usage

The Logo component displays Loom branding with flexible options for different use cases and contexts.

Basic Import & Usage

import { Logo } from '@loomhq/lens';
<Logo brand="product" maxWidth={13} />;

Key Props

• brand - Choose the appropriate logo style:

  • "product" - Blue logo for in-app UI (recommended)
  • "marketing" - For marketing materials, external content, signup and login
  • "attributed" - When Atlassian attribution is required
  • "ai" - For AI-related features and content
  • "apptile" & "loom" - Legacy variants (being deprecated)

• variant - Control which part of the logo to show:

  • "combined" - Full logo with symbol + wordmark (default)
  • "symbol" - Icon only
  • "wordmark" - Text only

• maxWidth - Set maximum width in theme units (e.g., 13, 6)

Best Practices

• Use brand="product" for most in-app interfaces
• Reserve brand="marketing" for external-facing content
• Choose appropriate sizes with maxWidth to fit your layout
• See New Brands for current recommended options

New Brands

<Arrange gap="xlarge" alignment="center">
  <Logo brand="product" maxWidth={13} symbolColor="blue"/>
  <Logo brand="marketing" maxWidth={13} symbolColor="blue"/>
  <Logo brand="attributed" maxWidth={13} symbolColor="blue"/>
</Arrange>

Note: The logos above preview our upcoming blue branding on our new variants. Once this color rollout is complete, or if you are included on the feature flag, you won't need to specify the symbolColor prop - simply use <Logo brand="product" | "marketing" | "attributed" /> and the correct blue colors will be applied automatically.

How you'll implement this with the feature flag enabled/post rollout:

<Arrange gap="xlarge" alignment="center">
  <Logo brand="product" maxWidth={13} />
  <Logo brand="marketing" maxWidth={13} />
  <Logo brand="attributed" maxWidth={13} />
</Arrange>

Deprecated Brands

<Arrange gap="xlarge" alignment="center">
  <Logo brand="apptile" maxWidth={13} />
  <Logo brand="loom" maxWidth={13} />
  <Logo brand="ai" maxWidth={13} />
</Arrange>

Note: We are in the process of deprecating our Blurple Loom logo variants. Though they are still supported, please avoid building with these components. Instead, if you need to implement logos in your feature, please reach out to us in #loom-design-cohesion Slack channel so we can coordinate the proper implementation with our upcoming blue branding rollout. This ensures a smooth transition when the new brand colors go live in production!

New Variants

<Arrange gap="xlarge" alignment="center">
  <Logo variant="wordmark" brand="product" maxWidth={13} symbolColor="blue"/>
  <Logo variant="symbol" brand="product" maxWidth={6} symbolColor="blue"/>
</Arrange>

Note: The logos above preview our upcoming blue branding. Once this color rollout is complete, or if you are included on the feature flag, you won't need to specify the symbolColor prop - simply use <Logo variant="wordmark" | "symbol" brand="product" /> and the correct blue colors will be applied automatically.

How you'll implement this with the feature flag enabled/post rollout:

<Arrange gap="xlarge" alignment="center">
  <Logo variant="wordmark" brand="product" maxWidth={13} />
  <Logo variant="symbol" brand="product" maxWidth={6} />
</Arrange>

Deprecated Variants

<Arrange gap="xlarge" alignment="center">
  <Logo variant="symbol" maxWidth={8} brand="apptile" />
  <Logo variant="symbol" maxWidth={8} />
  <Logo variant="symbol" maxWidth={8} brand="ai" />
  <Logo variant="wordmark" brand="product" maxWidth={13} />
  <Logo variant="wordmark" maxWidth={13} brand="ai" />
</Arrange>

Size

<Arrange gap="medium">
  <Logo variant="symbol" maxWidth={12} />
  <Logo variant="symbol" maxWidth={6} />
  <Logo variant="symbol" maxWidth={3} />
</Arrange>

Custom ID

Note: this section currently only affects the AI symbol (for more context).

When there're multiple elements on the same page refer to radialGradient with the same id, it may invalidate the second and following references. To resolve it, you can assign a custom ID to the AI symbol.

  <Logo maxWidth={6} variant="symbol" brand="ai" customId="aiPanelLogo"/>

Symbol and wordark colors can be assigned independently with symbolColor and wordmarkColor props.

<Arrange gap="xlarge">
  <Logo maxWidth={12} symbolColor="body" wordmarkColor="orange" brand="product" />
  <Logo maxWidth={12} symbolColor="body" wordmarkColor="orange" brand="product" variant="wordmark" />
  <Logo maxWidth={12} symbolColor="body" wordmarkColor="orange" brand="attributed"/>
</Arrange>

Props