# IconTile

> A neutral square with an icon, sized like an avatar, for a place or a thing without a face — a channel, a system notice, a file, an app, a computer.

Source: https://raft-design.botiverse.build/components/icon-tile. Generated from the current release; where it differs from what you remember, this page is right.

IconTile is a neutral square holding one icon. A channel is a place, not someone, so in lists it is a neutral `#` tile rather than an avatar; anything else without an identity (a system notice, a file, an app, a computer, a kind of search result) uses the same tile with its own icon. The tile takes the avatar sizes, so it sits where an avatar would.

```tsx
import { Monitor } from "lucide-react";
import { IconTile } from "@botiverse/raft-ui";

export function IconTileSizesComposition() {
  return (
    <div className="flex items-center gap-4">
      <IconTile size="xs">
        <Monitor />
      </IconTile>
      <IconTile size="sm">
        <Monitor />
      </IconTile>
      <IconTile size="md">
        <Monitor />
      </IconTile>
      <IconTile size="lg">
        <Monitor />
      </IconTile>
    </div>
  );
}
```

## When to use

| Situation                                                            | Use                                                                                                                                                                         |
| -------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| A channel in a list, a search result or a reference                  | IconTile with the `hash` icon                                                                                                                                               |
| A thread in a channel, leading an Activity row                       | IconTile with the `hash` icon and the thread badge ([InboxItem](https://raft-design.botiverse.build/components/inbox-item.md#the-leading-image)); a thread in a direct message leads with the avatar instead |
| A system notice, a file, an app, a computer, a kind of search result | IconTile with its icon                                                                                                                                                      |
| An error, a warning or a message in the notification center          | IconTile with `variant="warning"` or `variant="information"`                                                                                                                |
| The place the person is in, beside its title                         | The yellow location tile, `PanelHeaderIcon` ([Panel](https://raft-design.botiverse.build/components/panel.md))                                                                                                    |
| A channel in a desktop sidebar row                                   | The bare icon, `SidebarItemChannelIcon` ([Sidebar](https://raft-design.botiverse.build/components/sidebar.md)), without a tile                                                                                  |
| An agent or a person                                                 | [Avatar](https://raft-design.botiverse.build/components/avatar.md)                                                                                                                                               |

## Anatomy

- `IconTile`: the square. It holds one Lucide icon and sizes the icon to fit ([Iconography](https://raft-design.botiverse.build/foundations/iconography.md#sizes)).

## Variants

| Variant                 | Use for                                                                                                                   |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| `variant="default"`     | Everything: channels, files, apps, computers, notices. A `fill-muted` square with a `foreground-muted` icon and no border |
| `variant="warning"`     | An error or a warning in the notification center: `warning-soft`, with an ink icon                                        |
| `variant="information"` | A message in the notification center: `info-soft`, with an ink icon                                                       |

```tsx
import { AppWindow, Info, OctagonAlert } from "lucide-react";
import { IconTile } from "@botiverse/raft-ui";

export function IconTileVariantsComposition() {
  return (
    <div className="flex items-center gap-4">
      <IconTile role="img" aria-label="App">
        <AppWindow />
      </IconTile>
      <IconTile variant="warning" role="img" aria-label="Error">
        <OctagonAlert />
      </IconTile>
      <IconTile variant="information" role="img" aria-label="Message">
        <Info />
      </IconTile>
    </div>
  );
}
```

| `size`      | Use for                                                                 |
| ----------- | ----------------------------------------------------------------------- |
| `xs` (19px) | Compact rows, beside 19px avatars                                       |
| `sm` (27px) | Beside 27px avatars, such as search results; the icon of an action card |
| `md` (35px) | Lists and search results; the default                                   |
| `lg` (51px) | The header of a profile page                                            |

## Accessibility

IconTile renders a `<span>` and wraps no Base UI primitive.

- The tile is decorative beside its words, so it is hidden from assistive technology by default.
- Give a tile that means something on its own (such as the kind of a channel, with no words next to it) `role="img"` and an `aria-label`; it is then announced.

## Rules

- Don't give a channel a color: a channel is a place, not an identity.
- Show at most one yellow location tile per screen, beside the title of the place the person is in. In a list, the current item is the selected row, not a yellow tile ([States](https://raft-design.botiverse.build/foundations/states.md#usage)).
- Use `warning` and `information` only for system notices. Everywhere else the tile is neutral.
- Put the tile where an avatar would go in the same row, at the same size, so tiles and avatars line up in one column.

## API

### IconTile

A neutral square holding an icon, sized like an avatar: 19, 27, 35 or 51. It is decorative beside its words, so it is hidden from assistive tech; a tile that means something on its own takes `role="img"` and an `aria-label`, and is announced.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` |  |
| `variant` | `"warning" \| "default" \| "information"` | `"default"` |  |
| `render` | `ReactElement \| ((props, state) => ReactElement)` |  | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

Also takes the attributes of its element.

## Changes

- 0.6.1 (Added): `IconTile`, the neutral tile (`rf-tile`) for things with no face, on the avatar size ladder (19 / 27 / 35 / 51), with `warning` and `information` notice washes; `aria-hidden` unless given a role.