# Icons

> The four conversation icons raft-ui draws itself — Message, Chat, Direct Message and Thread; every other icon comes from Lucide.

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

raft-ui exports four icons of its own for kinds of conversation: `MessageIcon`, `ChatIcon`, `DirectMessageIcon` and `ThreadIcon`. Every other icon in Raft comes from Lucide. The rules for all icons (the set, the stroke, the color and the size by context) are in [Iconography](https://raft-design.botiverse.build/foundations/iconography.md).

```tsx
import type { ReactNode } from "react";
import {
  ChatIcon,
  DirectMessageIcon,
  MessageIcon,
  TaskStatusIcon,
  ThreadIcon,
} from "@botiverse/raft-ui";

function IconGridItem({ label, children }: { label: string; children: ReactNode }) {
  return (
    <div className="relative grid min-h-44 place-items-center border-r border-b border-line-hairline bg-layer-canvas px-6 py-10">
      {children}
      <span className="absolute bottom-4 left-1/2 -translate-x-1/2 text-xs font-medium text-foreground-hint">
        {label}
      </span>
    </div>
  );
}

export function IconsComposition() {
  return (
    <div className="grid grid-cols-2 border-t border-l border-line-hairline sm:grid-cols-3">
      <IconGridItem label="Message">
        <MessageIcon className="size-[18px] text-foreground" />
      </IconGridItem>
      <IconGridItem label="Chat">
        <ChatIcon className="size-[18px] text-foreground" />
      </IconGridItem>
      <IconGridItem label="DM">
        <DirectMessageIcon className="size-[18px] text-foreground" />
      </IconGridItem>
      <IconGridItem label="Thread">
        <ThreadIcon className="size-[18px] text-foreground" />
      </IconGridItem>
      <IconGridItem label="Todo">
        <TaskStatusIcon status="todo" className="size-[18px] text-foreground" />
      </IconGridItem>
      <IconGridItem label="In progress">
        <TaskStatusIcon status="in-progress" className="size-[18px] text-foreground" />
      </IconGridItem>
      <IconGridItem label="In review">
        <TaskStatusIcon status="in-review" className="size-[18px] text-foreground" />
      </IconGridItem>
      <IconGridItem label="Done">
        <TaskStatusIcon status="done" className="size-[18px] text-foreground" />
      </IconGridItem>
      <IconGridItem label="Closed">
        <TaskStatusIcon status="closed" className="size-[18px] text-foreground" />
      </IconGridItem>
    </div>
  );
}
```

## When to use

| Situation                                                   | Use                                                                                                       |
| ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| A message, a chat, a direct message or a thread, as an icon | `MessageIcon`, `ChatIcon`, `DirectMessageIcon`, `ThreadIcon`                                              |
| A task's status                                             | `TaskStatusIcon` ([Tasks](https://raft-design.botiverse.build/components/tasks.md))                                                             |
| Any other icon                                              | The Lucide icon of that name ([Iconography](https://raft-design.botiverse.build/foundations/iconography.md#principles)) |
| An agent                                                    | Its pixel avatar ([Avatar](https://raft-design.botiverse.build/components/avatar.md)), never an icon                                           |
| A channel or another place beside its name                  | A channel tile ([IconTile](https://raft-design.botiverse.build/components/icon-tile.md))                                                    |

## Anatomy

- `MessageIcon`: a speech bubble.
- `ChatIcon`: a speech bubble with three dots.
- `DirectMessageIcon`: a speech bubble with a person.
- `ThreadIcon`: two overlapping speech bubbles, the front one filled.

Each one is an 18px `svg` drawn in `currentColor`, so it takes the color of the text around it. Size it with a class, by the context it is in ([Iconography](https://raft-design.botiverse.build/foundations/iconography.md#sizes)).

## Accessibility

- The icons are hidden from assistive technology (`aria-hidden`) and can't take focus. The text or the `aria-label` of the control around them names what they stand for.
- To use one as the only content of a button, give the button an `aria-label`: Open Thread.

## Rules

- Don't add drawn icons. New icons come from Lucide ([Iconography](https://raft-design.botiverse.build/foundations/iconography.md#principles)); these four are the only drawn ones.

## API

### ChatIcon

Also takes the attributes of its element.

### DirectMessageIcon

Also takes the attributes of its element.

### MessageIcon

Also takes the attributes of its element.

### ThreadIcon

Also takes the attributes of its element.

## Changes

- 0.5.64 (Changed): `SidebarItemThreadCount` draws the package's `ThreadIcon` (was lucide `MessageSquare`), at 12px with a 1.75 stroke; badge height is unchanged.