LogoWordMark

@coinbase/cds-web@8.38.5

The full Coinbase logo with text for branding.

import { LogoWordmark } from '@coinbase/cds-web/icons/LogoWordmark'

󰒨

Source

󰏖

Storybook

󰏖

View as Markdown

---

Related components

• LogoMark,
• SubBrandLogoMark,
• SubBrandLogoWordMark

Basic usage

Loading...

󰙡

Live Code

<VStack alignItems="center">
  <Box height="40px">
    <LogoWordmark />
  </Box>
</VStack>

Foreground Variations

Loading...

󰙡

Live Code

<VStack gap={4}>
  <VStack gap={2}>
    <Text font="label2" color="fgMuted">
      Default (brand blue in light mode, white in dark mode)
    </Text>
    <Box height="40px">
      <LogoWordmark />
    </Box>
  </VStack>
  <VStack gap={2}>
    <Text font="label2" color="fgMuted">
      Foreground (high contrast black in light mode, white in dark mode)
    </Text>
    <Box height="40px">
      <LogoWordmark foreground={true} />
    </Box>
  </VStack>
</VStack>

Sizing

LogoWordmark doesn't have a size prop. Instead, control its size by setting the width or height of its container. The component will automatically maintain its aspect ratio.

Loading...

󰙡

Live Code

<VStack gap={4}>
  <VStack gap={2}>
    <Text font="label2" color="fgMuted">
      Small (24px height)
    </Text>
    <Box height="24px">
      <LogoWordmark />
    </Box>
  </VStack>
  <VStack gap={2}>
    <Text font="label2" color="fgMuted">
      Medium (40px height)
    </Text>
    <Box height="40px">
      <LogoWordmark />
    </Box>
  </VStack>
  <VStack gap={2}>
    <Text font="label2" color="fgMuted">
      Large (60px height)
    </Text>
    <Box height="60px">
      <LogoWordmark />
    </Box>
  </VStack>
  <VStack gap={2}>
    <Text font="label2" color="fgMuted">
      Width-constrained (150px width)
    </Text>
    <Box width="150px">
      <LogoWordmark />
    </Box>
  </VStack>
</VStack>