# IconChip

Centers an icon in a rounded square.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/IconChip.tsx)

## Overview

An icon chip is a rounded square that centers an icon, for headers and list leads.

The chip adds no semantics. Treat it as decorative when adjacent text names the item.

## Examples

### Basic

```tsx
import { IconChip } from '@tempoxyz/ds'
import { Settings } from '@tempoxyz/ds/icons'

export function Demo() {
  return (
    <IconChip>
      <Settings />
    </IconChip>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/IconChip/Basic.tsx)

### Size

Set `size` to `40` or `48`. It defaults to `48`.

```tsx
import { IconChip, style } from '@tempoxyz/ds'
import { Settings, Wallet } from '@tempoxyz/ds/icons'

export function Demo() {
  return (
    <div {...styles.row()}>
      <IconChip size="40">
        <Wallet />
      </IconChip>
      <IconChip size="48">
        <Settings />
      </IconChip>
    </div>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', gap: '3' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/IconChip/Size.tsx)

## Guidelines

TODO: Write guidelines for IconChip.