# Identicon

Shows a unique gradient avatar derived from an address.

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

## Overview

An identicon is a round gradient avatar derived from an address. The same address always renders the same colors.

Never use it as the only identifier. Show the address or account name beside it.

## Examples

### Basic

```tsx
import { Identicon } from '@tempoxyz/ds'

export function Demo() {
  return <Identicon address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" />
}
```

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

### Size

Set `size` to `16`, `24`, `32`, `40`, `48`, or `64` pixels. It defaults to `40`.

```tsx
import { Identicon, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.row()}>
      {(['16', '24', '32', '40', '48', '64'] as const).map((size) => (
        <Identicon address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" key={size} size={size} />
      ))}
    </div>
  )
}

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

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

### Address

Each `address` derives its own colors, in any letter case.

```tsx
import { Identicon, style } from '@tempoxyz/ds'

const addresses = [
  '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045',
  '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',
  '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe',
  '0x0000000000000000000000000000000000000000',
  '0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984',
  '0x6B175474E89094C44Da98b954EedeAC495271d0F',
  '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
  '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',
]

export function Demo() {
  return (
    <div {...styles.row()}>
      {addresses.map((address) => (
        <Identicon address={address} key={address} size="64" />
      ))}
    </div>
  )
}

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

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

## Guidelines

TODO: Write guidelines for Identicon.