Zostel Logo

The official Zostel logo components including the star symbol, wordmark, and combined logo with multiple layout and color options.

Preview

Logo Variants

ZOSTEL
ZOSTEL
ZOSTEL

Layouts

ZOSTEL
Z O S T E L

Symbol Only

Wordmark

ZOSTELZOSTELZOSTEL

Usage

tsx
import { ZostelSymbol, ZostelWordmark, ZostelLogo } from "zostel-ui";

// Symbol only
<ZostelSymbol size={48} color="#F1563F" />

// Wordmark only
<ZostelWordmark size="lg" spaced />

// Full logo - horizontal
<ZostelLogo size={48} layout="horizontal" />

// Full logo - vertical
<ZostelLogo size={64} layout="vertical" />

// White variant (for dark backgrounds)
<ZostelLogo color="white" />

ZostelSymbol Props

size
Type: number
Default: 48

Size of the symbol in pixels

color
Type: string
Default: "#F1563F"

Fill color for the symbol SVG

animated
Type: boolean
Default: false

Enable pulse animation

className
Type: string
Default: —

Additional CSS classes

ZostelWordmark Props

size
Type: "sm" | "md" | "lg" | "xl"
Default: "md"

Text size of the wordmark

color
Type: string
Default: "#43474B"

Text color

spaced
Type: boolean
Default: false

Add extra letter spacing (Z O S T E L)

className
Type: string
Default: —

Additional CSS classes

ZostelLogo Props

size
Type: number
Default: 48

Size of the symbol in pixels

layout
Type: "horizontal" | "vertical"
Default: "horizontal"

Arrangement of symbol and wordmark

color
Type: "default" | "white" | "orange"
Default: "default"

Color scheme preset

showWordmark
Type: boolean
Default: true

Whether to show the wordmark text

animated
Type: boolean
Default: false

Enable pulse animation on the symbol

className
Type: string
Default: —

Additional CSS classes
Previous Toggle Group Next Tagline Band