Skip to content
Index730 resources
Avatar

Avatar

81 resources in the index ship this component, best first. Group: Data Display.

Also called · profile picture · user picture · persona · profile photo · user image · gravatar · initials avatar

Before you ship

7
  1. 01Visualiser — Show what the avatar looks like before posting or updating
  2. 02Link to upload or select avatar — Accessible link for a user to select
  3. 03Placeholder 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
  4. 04Acceptable file types — Tell the user what file types are allowed (JPEG, PNG, SVG)
  5. 05Status 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
  6. 06Alternatives — 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
  7. 07Editing uploaded avatar — Allow a user to crop and resize their avatar before saving it

Checks from checklist.design, MIT.

Ships it

81