# Icon Prop

The icon prop is an object used to configure what icons are shown on the UpupUploader client component. It is optional.

Each icon element must be a valid React element that accepts an optional `className` prop for styling.

<Callout type="info">
    Recommended icon library suites include [React
    Icons](https://react-icons.github.io/react-icons) and [Lucide
    Icons](https://lucide.dev/).
</Callout>

| Key                                           | Example                                      | Type                         | Default value    |
| --------------------------------------------- | -------------------------------------------- | ---------------------------- | ---------------- |
| [CameraCaptureIcon](#cameracaptureicon)       | `icons={{CameraCaptureIcon: FaCamera}}`      | `FC<{ className?: string }>` | `TbCapture`      |
| [CameraDeleteIcon](#cameradeleteicon)         | `icons={{CameraDeleteIcon: MdDelete}}`       | `FC<{ className?: string }>` | `TbTrash`        |
| [CameraRotateIcon](#camerarotateicon)         | `icons={{CameraRotateIcon: FaCameraRotate}}` | `FC<{ className?: string }>` | `TbCameraRotate` |
| [ContainerAddMoreIcon](#containeraddmoreicon) | `icons={{ContainerAddMoreIcon: IoAdd}}`      | `FC<{ className?: string }>` | `TbPlus`         |
| [FileDeleteIcon](#filedeleteicon)             | `icons={{FileDeleteIcon: TiDelete}}`         | `FC<{ className?: string }>` | `TbTrash`        |
| [LoaderIcon](#loadericon)                     | `icons={{LoaderIcon: TbLoader2}}`            | `FC<{ className?: string }>` | `TbLoader`       |

## `CameraCaptureIcon`

Custom icon for the camera capture button.

**Example override:**

```tsx
import { FaCamera } from 'react-icons/fa'

;<UpupUploader
    icons={{
        CameraCaptureIcon: FaCamera,
    }}
/>
```

## `CameraDeleteIcon`

Icon for removing captured camera images.

## `CameraRotateIcon`

Button to switch between front/back camera.

## `ContainerAddMoreIcon`

Icon shown in the "Add More Files" button. Appears when multiple uploads are allowed.

## `FileDeleteIcon`

Icon for removing selected files from the list.

## `LoaderIcon`

Animated icon shown during file processing.

**Customization example:**

```tsx
import { ImSpinner8 } from 'react-icons/im'

;<UpupUploader
    icons={{
        LoaderIcon: ImSpinner8,
    }}
/>
```

All icons inherit the component's dark mode styling automatically through the `className` prop when provided.