Icon wrapper
A reusable container for a brand logo or a tinted icon, sized on the 16 / 24 / 32 / 40 scale. Used across product cards (Connections, Routing) and lists.
Anatomy
- 1Box
The square wrapper. size sm/md/lg/xl = 16/24/32/40 px.
- 2Tint (icon variant)
bg-blue-100 + text-blue-600 by default; radius scales with size (rounded-xs to rounded-md).
- 3Child
A Phosphor icon (icon variant, auto-sized) or a brand logo svg/img (logos variant, fills the box).
Variants
<IconWrapper size="sm"><CurrencyCircleDollar weight="light" /></IconWrapper>
<IconWrapper size="md"><CurrencyCircleDollar weight="light" /></IconWrapper>
<IconWrapper size="lg"><CurrencyCircleDollar weight="light" /></IconWrapper>
<IconWrapper size="xl"><CurrencyCircleDollar weight="light" /></IconWrapper><IconWrapper size="lg" className="bg-green-100 text-green-600"><Bank weight="fill" /></IconWrapper>
<IconWrapper size="lg" className="bg-amber-100 text-amber-600"><Lightning weight="fill" /></IconWrapper>
<IconWrapper size="lg" className="bg-muted text-muted-foreground"><CreditCard weight="fill" /></IconWrapper>Recipes
Ready-to-copy compositions covering the most common Yuno usages of this atom.
variant='icon' — a blue box holding a Phosphor glyph, the payments-provider default.
<div className="flex items-center gap-3">
<IconWrapper size="lg"><CurrencyCircleDollar weight="light" /></IconWrapper>
<div>
<div className="text-sm font-medium">Payouts</div>
<div className="text-xs text-muted-foreground">Daily USD settlement</div>
</div>
</div>variant='logos' — a bare brand logo sized to the box, no background.
{/* variant="logos" renders a bare brand logo (svg/img) at the box size */}
<IconWrapper variant="logos" size="lg">
<img src="/adyen.svg" alt="Adyen" />
</IconWrapper>Import
Copy this import line at the top of the file where you compose this atom.
import { IconWrapper } from "@/components/ui/icon-wrapper";Props
Everything else from the underlying HTML or Radix primitive is forwarded via ...props.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "icon" | "logos" | "icon" | icon = tinted box holding a glyph; logos = a bare brand logo sized to the box. |
| size | "sm" | "md" | "lg" | "xl" | "xl" | Box size: 16 / 24 / 32 / 40 px. Radius and inner icon size scale with it. |
| className | string | — | Override the tint (bg-*/text-*) or any other style. Merged via cn(). |
| children | ReactNode | — | A Phosphor icon (icon variant, auto-sized) or a logo svg/img (logos variant, fills the box). |
When to use
- Wrapping a payment-method or provider logo at a consistent size.
- A tinted icon chip next to a label (blue-100 box + blue-600 icon).
- Any place that needs a fixed, aligned icon/logo slot.
When not to use
- A plain inline icon — just render the Phosphor icon.
- An interactive button — use Button size='icon'.
Usage
- Use variant='logos' for brand logos (no background), variant='icon' for a tinted glyph.
- Override the tint via className (bg-green-100 text-green-600) for other statuses.
- Don't hardcode icon sizes inside — the wrapper sizes the child per the size prop.
- Don't use it as a clickable target — it's a presentational container.
Related
Cross-links to atoms and patterns you may reach for next.