Guides

Styles

Components

Layout

Icons

Icon set

Illustrations

Illustration set

Patterns

Utilities

Playground

Layout recipes
Showcase

Logo

Usage Guidelines

Usage

import { Logo } from '@loomhq/lens'
<Logo />

Variants

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

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

Size

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

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

Color

Use one of the pallete colors.

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

<Arrange gap="medium">
  <Logo maxWidth={12} symbolColor="body" wordmarkColor="orange" />
</Arrange>

<Arrange gap="medium">
  <Logo maxWidth={12} symbolColor="body" wordmarkColor="orange" />
</Arrange>

Props

prop

type

default

symbolColor

string

'primary'

wordmarkColor

string

'body'

variant

oneOf: 'combined', 'symbol', 'wordmark'

'combined'

maxWidth

oneOfType

number

string