Avatar
Components
An avatar is a visual representation of a user. It helps identify individuals across a digital interface, commonly used in user profiles, comment sections, and chat applications.
Checklist
Reset
Visualiser
Show what the avatar looks like before posting or updating
Link to upload or select avatar
Accessible link for a user to select
If you want the avatar visual itself to be clickable to change, add an indicator on it to show it's editable from that source e.g. a pencil icon
Placeholder image
If a user hasn't uploaded or added an avatar yet there should be a placeholder e.g. a default icon, or the user's initials
Acceptable file types
Tell the user what file types are allowed (JPEG, PNG, SVG)
Status change updating avatar
This doesn't have to be apart of the avatar component (it can be a banner or toast for example), but it is possible to incorporate it
Alternatives
If a user doesn't want to upload an image, offer an illustrative alternative, as it's better than nothing and can still convey their personality
Alternatives
Allow a user to crop and resize their avatar before saving it
