Thumbnail

A fixed-ratio media square for products, merchants, and list rows. It shows the image when src is set and otherwise falls back to a centered lucide icon (Package by default) on a bg-secondary tile — the standard no-image treatment across the app. Size the tile with class (defaults to size-9); the icon scales to it. Pass icon to swap the fallback glyph.

Fallback

With no src, or when the image fails to load, the icon renders instead — so a product row with a missing photo keeps its shape rather than collapsing. Pick an icon that says what the missing thing is.

In a product row

Size comes from class, so the tile matches the row it sits in. Give it real alt text when the image carries information the copy beside it does not.

Linen shirt — Oat

SKU LS-204 · 12 in stock

<div class="flex items-center gap-3">
	<Thumbnail icon={Package} class="size-12" />
	<div>
		<p class="text-sm font-medium">Linen shirt — Oat</p>
		<p class="text-muted text-xs">SKU LS-204 · 12 in stock</p>
	</div>
</div>

API

Prop	Type	Default	Description
`src`	`string`		Image URL. When absent, the fallback icon renders.
`alt`	`string`	`''`	Alt text for the image.
`icon`	`import('svelte').Component`	`Package`	Lucide icon component rendered when `src` is absent or fails to load.
`class`	`string`		Additional Tailwind classes merged onto the tile (controls its size).