# AvatarDropzone
> Cherry AvatarDropzone component - a circular single-file dropzone for profile pictures in three sizes.
Source: https://cherry.al/code/avatar-dropzone
> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).
# AvatarDropzone
The AvatarDropzone component is a circular, single-file dropzone for profile pictures. While empty it shows a dashed circle with an icon; a selected image fills the circle and can be removed with the corner button. Selecting a new file replaces the current one.
For design guidelines and all interactive states, see the [Inputs](/inputs) design page.
```jsx
import React from "react";
import { AvatarDropzone } from "cherry-styled-components";
export default function Page() {
return (
console.log(file)}
onFileRejected={({ file, reason }) => console.warn(file.name, reason)}
/>
);
}
```
With sizes:
```html
```
## Properties
Size of the circle: 64px (small), 96px (default), or 128px (big).
Name of the Lucide icon shown while empty. `IconProps` is a string union of all Lucide icon names, not an object. Defaults to `"User"`.
Maximum file size in bytes.
Accessible label for the drop target. Defaults to `"Upload profile
picture"`.
Called with the selected picture, or `null` when it is removed.
Called when a file is rejected for being the wrong type or too big.
Native accept filter. Defaults to `"image/*"`.
Disables the dropzone: the tile is dimmed and clicks and drops are ignored.
AvatarDropzone forwards its ref to the hidden file input, and any remaining native `` attributes (`name`, `id`, `onBlur`, and so on) pass through to it. The props above are typed by the exported `AvatarDropzoneProps` interface.