LogoMark

@coinbase/cds-web@9.28.0

The Coinbase logo mark for branding.

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

󰒨

Source

󰏖

Storybook

󰏖

View as Markdown

---

Related components

• LogoWordMark,
• SubBrandLogoMark,
• SubBrandLogoWordMark

Basic usage

Loading...

󰙡

Live Code

<VStack alignItems="center">
  <Box width="100%">
    <LogoMark size={32} />
  </Box>
</VStack>

Different Sizes

Loading...

󰙡

Live Code

<VStack gap={4}>
  <VStack gap={2}>
    <Text font="label2" color="fgMuted">
      Size 16
    </Text>
    <Box width="100%">
      <LogoMark size={16} />
    </Box>
  </VStack>
  <VStack gap={2}>
    <Text font="label2" color="fgMuted">
      Size 24
    </Text>
    <Box width="100%">
      <LogoMark size={24} />
    </Box>
  </VStack>
  <VStack gap={2}>
    <Text font="label2" color="fgMuted">
      Size 32
    </Text>
    <Box width="100%">
      <LogoMark size={32} />
    </Box>
  </VStack>
</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 width="100%">
      <LogoMark size={32} />
    </Box>
  </VStack>
  <VStack gap={2}>
    <Text font="label2" color="fgMuted">
      Foreground (high contrast black in light mode, white in dark mode)
    </Text>
    <Box width="100%">
      <LogoMark size={32} foreground={true} />
    </Box>
  </VStack>
</VStack>