Components / Brand

Logo

The Somnia wordmark and the {s} mark, drawn from the brand kit and colored by currentColor.

Extracted fromMarketing siteExplorer

Import

tsx

import { Logo, LogoMark, WORDMARK, MARK } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { Logo, LogoMark, WORDMARK, MARK } from "@somnia-chain/ui/next"

Examples

Wordmark and mark

examples/logo/default.tsxShow code

tsx

import { Logo, LogoMark } from "@somnia-chain/ui"

export default function LogoExample() {
  return (
    <div className="flex flex-wrap items-center gap-10">
      <Logo className="h-8 w-auto text-fg" />
      <LogoMark className="h-8 w-auto text-accent" />
      <span className="tone-violet inline-flex rounded-[6px] p-4">
        <Logo className="h-6 w-auto" />
      </span>
    </div>
  )
}