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.

Recommended icon library suites include React Icons and Lucide Icons.

Key	Example	Type	Default value
CameraCaptureIcon	`icons={{CameraCaptureIcon: FaCamera}}`	`FC<{ className?: string }>`	`TbCapture`
CameraDeleteIcon	`icons={{CameraDeleteIcon: MdDelete}}`	`FC<{ className?: string }>`	`TbTrash`
CameraRotateIcon	`icons={{CameraRotateIcon: FaCameraRotate}}`	`FC<{ className?: string }>`	`TbCameraRotate`
ContainerAddMoreIcon	`icons={{ContainerAddMoreIcon: IoAdd}}`	`FC<{ className?: string }>`	`TbPlus`
FileDeleteIcon	`icons={{FileDeleteIcon: TiDelete}}`	`FC<{ className?: string }>`	`TbTrash`
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,
    }}
/>

Icon for removing captured camera images.

Button to switch between front/back camera.

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

Icon for removing selected files from the list.

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.