Show your brand logo

At a glanceCopy Anchor Link

• Who: Teams building a header, a footer or a share image for their own site.
• What: Render your own logo as an inline SVG that paints with currentColor, so it follows the text colour in light, dark and every visual identity.
• Use when: Next to your product name in a site header or footer, or as the mark of a share image.
• Avoid when: For the zedkit mark — Logo is zedkit's own mark, used by the zedkit docs site; do not ship it as yours.
• See also: Switch the visual identity with one attribute

PreviewCopy Anchor Link

InstallCopy Anchor Link

pnpm add @zedtech/zedkit-ui

Latest: 0.6.4 (via changesets).

ExampleCopy Anchor Link

import { BrandLogo } from "@zedtech/zedkit-ui";
<BrandLogo title="Harbor Studio" viewBox="0 0 32 24" className="h-6 text-primary">
  <path d="M16 1 25 15H7Z" />
  <path d="M0 19c4 0 4 3 8 3s4-3 8-3 4 3 8 3 4-3 8-3v5H0Z" />
</BrandLogo>

import { BrandLogo } from "@zedtech/zedkit-ui";
<a href="/" className="flex items-center gap-2 text-foreground">
  <BrandLogo title="" viewBox="0 0 32 24" className="h-6 text-primary">
    <path d="M16 1 25 15H7Z" />
  </BrandLogo>
  Harbor Studio
</a>

Wraps: none (inline SVG)

PropsCopy Anchor Link