# Asset tokens — see before you ship

`moment.image`, `welcome.image`, and `option.icon` (see [Reference → Node types](/docs/reference/#node-types))
each accept one of a small, closed set of tokens. Run `weir asset-tokens` for the same
descriptions as text, without leaving your agent host — useful for picking a token without a
browser round-trip, though it can't show you the actual pixels. Guessing from the token's name
alone is not reliable: a 2026-07-26 cold-start evaluation had a developer building a plant-care
app pick `path-anchor` blind, expecting something plant-shaped. It rendered a mosque at sunset.
This page (and `weir asset-tokens`) exist so that never happens again.

## The honest constraint — and the fix

**The five built-in `moment`/`welcome` image tokens below are real photography, authored for
one specific app's (Niyat's) art direction — an Islamic-lifestyle app.** They are not generic, not
neutral, and not matched to any other app's brand. If your flow's subject matter doesn't fit olive
groves, mosque architecture, and sunset domes, none of these five tokens are a good fit.

**You can now supply your own image.** Declare it once at the top of your flow spec and reference
it as `"custom:<id>"` from any `moment`/`welcome` screen:

```jsonc
{
  "customAssets": [
    { "id": "heroPlant", "path": "assets/hero-plant.jpg" }
  ],
  "screens": [
    { "id": "moment", "type": "moment", "headline": "Grow something *real*.", "image": "custom:heroPlant", "cta": { "label": "Continue" } }
  ]
}
```

**Supply it at 3x the viewport (about 1170×2532 for the standard 390×844 iPhone viewport), not 1x**
— the image renders full-bleed at CSS pixel size, and anything under 3x its rendered box looks soft
on a real device pixel ratio. The Previews page's asset-density check flags this; don't wait to
trip it. See [Reference → Custom images](/docs/reference/#custom-images) for the full worked
example, path resolution rules, and supported formats. It is validated, embedded, and rendered
through the exact same path as a built-in token (the same scrim, the same full-bleed sizing, the
same 350KB bundle budget), so a plant-care app can finally show a plant instead of picking blind
from five photos of somewhere else's brand.

The 20 `option.icon` tokens below are still a closed set (no custom-icon upload yet) — mostly
generic (book, star, heart, clock, and so on) and travel better across app subject matter, except
four with an explicit Islamic-lifestyle framing (`prayer`, `quran`, `dhikr`, `sadaqah`) — pick
from the other 16 if that framing doesn't fit your app.

## `moment.image` / `welcome.image` tokens

<div class="asset-grid">
<figure class="asset-card">
[image: Close-up olive-tree branches framing a bright, hazy golden sky; an olive grove blurred in the background. Soft, warm, pastoral.]
<figcaption>

`verse-hero-olive`

Close-up olive-tree branches framing a bright, hazy golden sky; an olive grove blurred in the background. Soft, warm, pastoral.

</figcaption>
</figure>
<figure class="asset-card">
[image: A sunlit mosque/palace hallway seen through an ornate carved archway with pierced lattice windows, gold light, green-and-gold tiled columns, a hanging lantern, and a potted plant.]
<figcaption>

`verse-hero-arch`

A sunlit mosque/palace hallway seen through an ornate carved archway with pierced lattice windows, gold light, green-and-gold tiled columns, a hanging lantern, and a potted plant.

</figcaption>
</figure>
<figure class="asset-card">
[image: A receding corridor of ornate horseshoe arches (Moroccan/Andalusian-style architecture) in warm golden light, tiled dado, repeating perspective down a colonnade.]
<figcaption>

`path-reveal-arches`

A receding corridor of ornate horseshoe arches (Moroccan/Andalusian-style architecture) in warm golden light, tiled dado, repeating perspective down a colonnade.

</figcaption>
</figure>
<figure class="asset-card">
[image: A mosque dome and minaret silhouetted against a dusk sky (deep blue fading to orange), dark tree silhouettes in the foreground.]
<figcaption>

`path-anchor`

A mosque dome and minaret silhouetted against a dusk sky (deep blue fading to orange), dark tree silhouettes in the foreground.

</figcaption>
</figure>
<figure class="asset-card">
[image: An elevated view of a large white mosque complex at golden hour: a dome and minaret in the foreground, more minarets and palm trees in the distance, blue sky with clouds.]
<figcaption>

`welcome-hero`

An elevated view of a large white mosque complex at golden hour: a dome and minaret in the foreground, more minarets and palm trees in the distance, blue sky with clouds.

</figcaption>
</figure>
</div>

## `option.icon` tokens

Single-color line icons, rendered here on a dark tile at the size they actually appear in the
app. `prayer`, `quran`, `dhikr`, and `sadaqah` carry the same Islamic-lifestyle framing as the
image tokens above; the other 16 are generic.

<div class="icon-grid">
<figure class="icon-card">
[image: An open book, two facing pages with a spine down the middle.]
<figcaption>

`book` — An open book, two facing pages with a spine down the middle.

</figcaption>
</figure>
<figure class="icon-card">
[image: A solid crescent moon.]
<figcaption>

`moon` — A solid crescent moon.

</figcaption>
</figure>
<figure class="icon-card">
[image: A solid five-point star.]
<figcaption>

`star` — A solid five-point star.

</figcaption>
</figure>
<figure class="icon-card">
[image: A sun: a circle with eight rays.]
<figcaption>

`sun` — A sun: a circle with eight rays.

</figcaption>
</figure>
<figure class="icon-card">
[image: A single four-point sparkle/diamond shape.]
<figcaption>

`sparkle` — A single four-point sparkle/diamond shape.

</figcaption>
</figure>
<figure class="icon-card">
[image: A solid heart.]
<figcaption>

`heart` — A solid heart.

</figcaption>
</figure>
<figure class="icon-card">
[image: A solid leaf shape with a faint center vein.]
<figcaption>

`leaf` — A solid leaf shape with a faint center vein.

</figcaption>
</figure>
<figure class="icon-card">
[image: A single outlined cloud.]
<figcaption>

`cloud` — A single outlined cloud.

</figcaption>
</figure>
<figure class="icon-card">
[image: A question mark.]
<figcaption>

`question` — A question mark.

</figcaption>
</figure>
<figure class="icon-card">
[image: A compass: an outlined circle with a solid pointer needle.]
<figcaption>

`compass` — A compass: an outlined circle with a solid pointer needle.

</figcaption>
</figure>
<figure class="icon-card">
[image: A notification bell.]
<figcaption>

`bell` — A notification bell.

</figcaption>
</figure>
<figure class="icon-card">
[image: A padlock: a rounded body with a shackle on top.]
<figcaption>

`lock` — A padlock: a rounded body with a shackle on top.

</figcaption>
</figure>
<figure class="icon-card">
[image: A shield outline.]
<figcaption>

`shield` — A shield outline.

</figcaption>
</figure>
<figure class="icon-card">
[image: Two raised, cupped-hand shapes side by side, evoking hands raised in supplication.]
<figcaption>

`prayer` — Two raised, cupped-hand shapes side by side, evoking hands raised in supplication.

</figcaption>
</figure>
<figure class="icon-card">
[image: A closed book with a ribbon bookmark tab at the top.]
<figcaption>

`quran` — A closed book with a ribbon bookmark tab at the top.

</figcaption>
</figure>
<figure class="icon-card">
[image: Six solid dots arranged in a ring, evoking prayer beads (a tasbih).]
<figcaption>

`dhikr` — Six solid dots arranged in a ring, evoking prayer beads (a tasbih).

</figcaption>
</figure>
<figure class="icon-card">
[image: A simple person silhouette (head and shoulders), evoking giving to another person.]
<figcaption>

`sadaqah` — A simple person silhouette (head and shoulders), evoking giving to another person.

</figcaption>
</figure>
<figure class="icon-card">
[image: A clock face with hour and minute hands.]
<figcaption>

`clock` — A clock face with hour and minute hands.

</figcaption>
</figure>
<figure class="icon-card">
[image: A calendar page with two hanging binder rings at the top.]
<figcaption>

`calendar` — A calendar page with two hanging binder rings at the top.

</figcaption>
</figure>
<figure class="icon-card">
[image: An envelope.]
<figcaption>

`mail` — An envelope.

</figcaption>
</figure>
<figure class="icon-card">
[image: A checkmark inside a circle.]
<figcaption>

`check` — A checkmark inside a circle.

</figcaption>
</figure>
</div>

## Unknown tokens

Both `option.icon` and `moment.image`/`welcome.image` are closed enums — an invented or
misspelled token in either fails `validate()`/`weir_conform` at authoring time, listing the
valid tokens in the error, rather than publishing and rendering wrong (or blank) at runtime.
This page still exists because "does not error" was never the whole bar: an author picking a
valid token blind, with no idea what it depicts, is exactly how a plant-care app got a mosque
at sunset. Validation catches typos; it does not tell you what a token looks like.

## See also

- [Reference → Node types](/docs/reference/#node-types) — where `image`/`icon` fields are declared.
- [Reference → Custom images](/docs/reference/#custom-images) — supply your own image instead of picking from the five above.
- [Reference → Experiments and the variant gate](/docs/reference/#experiments-and-the-variant-gate) — the other schema area with a public worked example.
