# CellMedia

**📖 Live documentation:** https://cds.coinbase.com/components/media/CellMedia/

Displays media within cells.

## Import

```tsx
import { CellMedia } from '@coinbase/cds-web/cells/CellMedia'
```

## Examples

:::warning Deprecated
This component will be removed in a future release. Pass media to cells directly via the `media` prop. For example: `<Avatar src={...} />`, `<Icon name={...} />`, `<RemoteImage source={...} />`, or a Pictogram.
:::

### Basic Icon Usage

```tsx live
<CellMedia active type="icon" name="home" accessibilityLabel="Home icon" />
```

### Asset Display

Common usage for displaying cryptocurrency assets with proper accessibility.

```tsx live
<CellMedia type="asset" source={assets.btc.imageUrl} accessibilityLabel="Bitcoin icon" />
```

### Pictogram Display

Used for displaying pictographic illustrations, commonly used in empty states or feature highlights.

```tsx live
<CellMedia
  type="pictogram"
  illustration={<Pictogram name="recurringPurchases" dimension="48x48" />}
  accessibilityLabel="Recurring purchases pictogram"
/>
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `illustration` | `ReactElement<PictogramBaseProps, string \| JSXElementConstructor<any>>` | Yes | `-` | - |
| `name` | `IconName` | Yes | `-` | - |
| `source` | `string \| number` | Yes | `-` | - |
| `type` | `image \| avatar \| pictogram \| asset \| icon` | Yes | `-` | - |
| `active` | `boolean` | No | `-` | Whether the icon is active |
| `color` | `Color` | No | `-` | - |
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
| `title` | `string` | No | `-` | - |