Duck Mark
The mascot as flat vector, for the sizes the photographic logo cannot take.
DisplayServer safe
Preview
rest
swim
currentColor
any size
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/duck-markPulls in @duck/theme. Already installed items are skipped.
Usage
import { DuckMark } from "@/components/ui/duck-mark"The file lands in components/ui/duck-mark.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| pose | rest | swim | rest | swim adds two lines of water under the duck. |
Rules
What keeps this component from turning into noise.
- Use DuckGlyph, not this, at 16-24px — the photographic mark is tuned for that size and carries the brand.
- Use this anywhere above about 48px, where the photographic mark's transparent halo starts to show.
- The body is currentColor. Set the colour with a text-* class.