Skip to content
IndexDesign corpus

Avatar

82 resources ship this component · Data Display

Also called: profile picture, user picture, persona, profile photo, user image, gravatar, initials avatar.

Before you ship7 checks
  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 it82