IconTile

<ul className="flex max-w-sm flex-col gap-gap-md">
  <li className="flex items-center gap-gap-md"><IconTile icon={Sparkles} tone="brand" /><span className="text-body-md text-fg">Smart replies drafted for you</span></li>
  <li className="flex items-center gap-gap-md"><IconTile icon={ShieldCheck} tone="success" /><span className="text-body-md text-fg">Encrypted end to end</span></li>
  <li className="flex items-center gap-gap-md"><IconTile icon={Bell} /><span className="text-body-md text-fg">Quiet hours at night</span></li>
</ul>

<div className="flex flex-col gap-gap-md">
  {(['md', 'lg'] as const).map((size) => (
    <div key={size} className="flex flex-wrap gap-gap-sm">
      <IconTile size={size} icon={Star} tone="neutral" />
      <IconTile size={size} icon={Sparkles} tone="brand" />
      <IconTile size={size} icon={ShieldCheck} tone="success" />
      <IconTile size={size} icon={TriangleAlert} tone="warning" />
      <IconTile size={size} icon={TriangleAlert} tone="danger" />
      <IconTile size={size} icon={Info} tone="info" />
    </div>
  ))}
</div>