IconWell

A rounded square tile that holds a landing metaphor glyph — a quiet hairline ring by default, or a brand-tinted badge.

View code

tsx

<div mix={[vstack({ gap: 4 })]}>
	<div mix={[hstack({ gap: 4, align: "center" })]}>
		<IconWell size="sm">
			<ZapIcon aria-hidden="true" />
		</IconWell>
		<IconWell>
			<BellRingIcon aria-hidden="true" />
		</IconWell>
		<IconWell size="lg">
			<GaugeIcon aria-hidden="true" />
		</IconWell>
	</div>
	<div mix={[hstack({ gap: 4, align: "center" })]}>
		<IconWell tone="brand" size="sm">
			<ZapIcon aria-hidden="true" />
		</IconWell>
		<IconWell tone="brand">
			<BellRingIcon aria-hidden="true" />
		</IconWell>
		<IconWell tone="brand" size="lg">
			<GaugeIcon aria-hidden="true" />
		</IconWell>
	</div>
</div>

Demo landings

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { IconWell } from "@sdxc/ui/landing";

Centers a glyph in a rounded square so landing claim icons share one size language across bands, with the same tile Feature.Icon draws.

Examples

tsx

<IconWell tone="brand"><ZapIcon size={18} aria-hidden="true" /></IconWell>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`size`	`"sm" \| "md" \| "lg"`	No	Footprint. Defaults to DEFAULT_SIZE.
`tone`	`Tone`	No	Tile chrome. Defaults to DEFAULT_TONE.
`children`	`RemixNode`	Yes	Glyph rendered inside the well — typically an `@sdxc/icons` icon.

Also accepts everything in TagProps<"span">.

Types

Name	Values	What it decides
`Size`	`"sm" \| "md" \| "lg"`	Well footprint: compact for dense grids, medium for every claim beside a Feature.Icon, large for a lone hero metaphor.