Elephant

A small, playful elephant mark — « the elephant with those ears can fly »: standing with its ear folded down, or flying with the ear spread like a wing. Sage body, sand ear, flat colours that read on both themes. A figure, not a product logo.

Web · ✓Mobile · n/aDesktop · ✓DeprecatedFeedback

import { Elephant } from "@krizaka/ui/elephant";

Web only — React, from @krizaka/ui/elephant. Deprecated: kept for the apps that still use it, removed in its next major.

Mobile · n/a. A web mark for a page's hero or a chat's closing line; the app takes the same drawing from the mark assets until an app screen needs it. → Mascots

Why it is here. No product or site imports it and no filed need names it (ADR-006 audit, 2026-10-25): there is no replacement.

DeprecatedSince 3.55.0, removed in 4.0.0. No product or site imports it and no filed need names it (ADR-006 audit, 2026-10-25): there is no replacement.

When to use

In the hero of a neighbourly page, small, beside the words (pose="standing").
At the closing of a conversation, as a warm last line (pose="flying").

When not to use

A product's own mark in a navigation or a header.Use instead: Mascots
A bird that answers a state (a wait, an error, an empty list).Use instead: Mascot state

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Elephant } from "@krizaka/ui/elephant";

Examples

Standing and flying

The two poses: the ear folded down, then spread like a wing.

The closing of a chat

The small flying elephant beside one warm line.

See you next Sunday, neighbour. The door stays open.

Props

The elephant: a small, playful mark from the neighbour joke — « the elephant with those ears can fly ». Not a product logo: a quiet figure for the hero of a page or the closing of a chat. Sage body, sand ear, flat colours that read on both themes; decorative by default.

Prop	Type	Default	Description
`animated`	`boolean`	`true`	The wing flaps gently (a flying elephant only). Off with `false`; always off under prefers-reduced-motion.
`pose`	`"standing" \| "flying"`	`standing`	`standing` with the ear folded down, or `flying` with the ear spread like a wing.
`size`	`number`	`64`	Width and height in pixels.
`title`	`string`	—	An accessible name (the mark becomes an image); without it the mark is decorative.

Accessibility

Decorative by default (aria-hidden): the text next to it carries the meaning. With title it becomes an image with that name.
The wing flap stops under prefers-reduced-motion and with animated={false}.
Sage and sand reach at least 3:1 on the page surfaces of both themes (tested).

Best practices

Use it small and rarely: once per screen at most, never as a pattern or a background.
Keep the words beside it: the elephant never carries the message alone.
Standing is the default; flying is for a moment that lifts (a goodbye, a good news).
Leave the colours as they are: the sage and the sand are two stops of the brand palette, each readable on both themes.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub