Icon Tile

A squircle that holds one glyph or app mark. Raised for a tile sitting on a gradient cover, soft for a tile in a list row.

tsx

1import { IconTile } from "@pestoui/core"

Variants

raised is a white tile with a soft shadow. soft is a tinted tile with no lift, for rows on a card.

Four fixed boxes — 40, 48, 56 and 64px — each with its own corner radius and glyph size, so the shape stays a squircle at every step.

Prop	Type	Default	Description
variant	"raised" \| "soft"	"raised"	White with a soft shadow, or a tinted fill with a hairline ring.
size	"sm" \| "md" \| "lg" \| "xl"	"md"	A 40, 48, 56 or 64px box. The glyph inside is sized to half the edge.
children	ReactNode	—	One icon or brand mark.
…props	React.ComponentProps<"div">	—	Everything else lands on the tile.

Pesto UI · 117 documented components