# FileIcon

Renders the file attachment icon inside [`MessageList`](/chat/docs/sdk/react-native/v8/ui-components/message-list/).

## Best Practices

- Use `mimeType` to select appropriate icons or colors.
- Keep icon sizes consistent across file attachments.
- Avoid heavy icon rendering logic in large lists.
- Provide a fallback icon for unknown MIME types.
- Customize via the `Channel` prop to keep overrides centralized.

## Basic Usage

Customize it and pass it via the [`FileAttachmentIcon`](/chat/docs/sdk/react-native/v8/core-components/channel#fileattachmenticon/) prop on `Channel`.

Example: change the icon size.

```tsx
import { Channel, FileIcon } from "stream-chat-react-native";

<Channel FileAttachmentIcon={() => <FileIcon size={40} />} />;
```

## Props

### `mimeType`

MIME type for the file attachment (for example, `application/pdf`, `audio/mp4`).

| Type   |
| ------ |
| String |

### `size`

Icon size.

| Type   |
| ------ |
| Number |


---

This page was last updated at 2026-04-17T17:33:44.650Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v8/ui-components/file-icon/](https://getstream.io/chat/docs/sdk/react-native/v8/ui-components/file-icon/).