Icons

Every brand icon and every place, as components. The files come from the brand’s generators, so the code can never drift from the drawings.

Preview

Amenities — one component, four dialects

variant	Wi-Fi	Beds	Café	AC	Lockers	Laundry
`roundel (master)`
`ui`
`line`
`duotone`

Backpacking — the line icons

Mountains

Tent

Campfire

Compass

Backpack

Sleeping bag

Trek

Any icon, any set — ZostelIcon (544 icons, 2124 files)

zostel-roundel · passport

zo-duotone · quest

zostel-ui · verified · currentColor

zostel-line · surf

Places — every place Zostel is live (PlaceIcon)

icon

tile

mono · currentColor

dp

Landmarks and nature — the master drawings

Taj Mahal

Charminar

India Gate

Sun

Pine

Usage

tsx

import {
  WifiIcon, BedIcon, TentIcon, SleepingBagIcon, TajMahalIcon, MenuIcon,
  ZostelIcon, PlaceIcon,
} from "zostel-ui";

<WifiIcon />                                  {/* the master amenity roundel */}
<WifiIcon variant="ui" />                     {/* Zostel UI weight, in the text colour */}
<BedIcon variant="duotone" size={32} />       {/* Zo duotone */}
<SleepingBagIcon color="currentColor" />      {/* a line icon in one colour */}
<TajMahalIcon size={96} />                    {/* the master drawing */}

{/* any of the icons in any set: zostel-roundel · zostel-line · zostel-ui · zo-duotone */}
<ZostelIcon set="zostel-ui" name="verified" color="currentColor" size={24} />

{/* every place Zostel is live: icon · tile · mono · dp */}
<PlaceIcon slug="hampi" variant="tile" size={64} />

Named icons (WifiIcon, TentIcon, TajMahalIcon…)

Prop	Type	Default	Description
`size`	`number`	`24`	Width and height, px.
`variant`	`"roundel" \| "ui" \| "line" \| "duotone"`	`"roundel"`	Amenity icons only: the master roundel, or the same idea in another dialect.
`color`	`string`	—	One colour instead of the drawing’s own (roundels keep theirs); "currentColor" follows the text.
`title`	`string`	—	Accessible name; defaults to what it draws. An empty title (title="") makes it decorative, hidden from screen readers (aria-hidden): for a glyph beside words or inside a control that has its own name, e.g. <ChevronRightIcon title="" /> in a Button with an aria-label.
`animated`	`boolean`	`false`	A slow pulse; still for reduced motion.

size

Type: number

Default: 24

Width and height, px.

variant

Type: "roundel" | "ui" | "line" | "duotone"

Default: "roundel"

Amenity icons only: the master roundel, or the same idea in another dialect.

color

Type: string

Default: —

One colour instead of the drawing’s own (roundels keep theirs); "currentColor" follows the text.

title

Type: string

Default: —

Accessible name; defaults to what it draws. An empty title (title="") makes it decorative, hidden from screen readers (aria-hidden): for a glyph beside words or inside a control that has its own name, e.g. <ChevronRightIcon title="" /> in a Button with an aria-label.

animated

Type: boolean

Default: false

A slow pulse; still for reduced motion.

ZostelIcon

Prop	Type	Default	Description
`name`	`string`	—	An icon name from /brand/icons/index.json (wifi, trek, passport…).
`set`	`"zostel-roundel" \| "zostel-line" \| "zostel-ui" \| "zo-duotone"`	`"zostel-line"`	The dialect.
`color`	`string`	—	Needed for zostel-ui (its files are currentColor): pass "currentColor".
`size / title / className`		—	As above.

name

Type: string

Default: —

An icon name from /brand/icons/index.json (wifi, trek, passport…).

set

Type: "zostel-roundel" | "zostel-line" | "zostel-ui" | "zo-duotone"

Default: "zostel-line"

The dialect.

color

Type: string

Default: —

Needed for zostel-ui (its files are currentColor): pass "currentColor".

size / title / className

Type:

Default: —

As above.

PlaceIcon

Prop	Type	Default	Description
`slug`	`string`	—	A live place: manali, hampi, pokhara… (/brand/places/index.json).
`variant`	`"icon" \| "tile" \| "mono" \| "dp"`	`"icon"`	Its own colours · on its own colour · one colour · the 1080 display picture.
`color / size / title`		—	As above (color with mono).

slug

Type: string

Default: —

A live place: manali, hampi, pokhara… (/brand/places/index.json).

variant

Type: "icon" | "tile" | "mono" | "dp"

Default: "icon"

Its own colours · on its own colour · one colour · the 1080 display picture.

color / size / title

Type:

Default: —

As above (color with mono).

Which set when

zostel-roundel — amenities, features and badges. zostel-line — editorial and print, 48 px and up. zostel-ui — product UI at 16–32 px, always in currentColor. zo-duotone — Zo Trips, Zo Selections and Zo World. The whole library, with downloads, is on /icons; every place’s kit is on /destinations.