Avatar UI design

The anatomy of Userpic: content, states, use-cases. Colors & UI design ideas reviewed. Including some layouts for your inspiration.
August 2021 · 6 mins read

by Roman Kamushken


Heya! Roman's here.

I am a UI designer, maker, and seller. It's been already 3+ years passed since I started to make templates for Figma and founded Setproduct to help startups and individuals save on design and release their apps faster.
Handling 20+ years in graphic design, last years I've been browsing thousands of apps, screens, components, and layouts almost DAILY to assemble the most complete handbook of how to design components, templates, and entire apps.

But this guide is not there yet. I've faced a challenge trying to pull out everything I've learned, and I hope you'll help me to get a handbook started. I truly need to take off of my brain lay it down on paper…

Here is my exploration and research for the variants to design Avatars also known as Userpics. You will be guided through the States, Sizes, Styles, Usage, and Templates containing avatars in order to have all the keys for your design mission.

Prepare for the tiny UI details, you won't notice till you get too close.

What is Avatar?

Avatar (aka Userpic) — is a component used to represent a user's profile picture.

Implement Avatars with an action leading to the app section where the user is able to modify preferences, options, or edit self details.

Table of contents

Avatar Anatomy
  • States
  • Size & Color
  • Actions
  • User status
  • Notification badges
  • Call to action
Text & Captions
  • Avatars with sided text
  • Avatars with bottom
UX & Usability
  • Events
  • Progress
  • Selection
Avatar group
  • With nested button
  • Nested badge
  • Onhovered badge
  • Onhovered Avatar
  • Templates
SetGPT is a free chat gpt clone aimed for UI, UX and product designers, writers and solopreneurs

Research, copy and ideate with SetGPT!

We've launched the alternative ChatGPT clone dedicated to UI designers, UX researchers, writers and indiehackers.

Powered by the latest OpenAI gpt-3.5-turbo model, this free chatbot is the perfect tool for those in need of intelligent and innovative insights, wrapped with a slick UI and sophisticated user experience.
SetGPT is a free service; however, authentication is required


The default states for Avatar are:

  • empty
  • initials
  • user's picture
Avatar UI design exploration
Size & Color
The size and color of the Avatar may vary, depending on a use case:

  • 24–40dp width is mostly used for App bars, Headers, etc.
  • 40–48dp for Avatars used in lists, or content blocks
  • 56+ when used in templates: Profile, Settings, etc.
  • Colors may vary for a better recognition
Avatar UI design exploration
Additional elements for Avatar may be nested to indicate, notify, or call to action.

  • You may indicate whether a user is online, or not
  • You may notify and provide visual feedback with a numbered badge
  • You may show up an additional icon to encourage into action
Avatar UI design exploration
User status
The common pattern of displaying the user's status is to nest a round indicator at the bottom right.

  • Use green for online, gray for offline status
  • Use filled shape when online, empty when offline (alt. variant)
Avatar UI design exploration
Notification badges
Avatar's badges could be stylized according to a priority to catch the user's attention.

  • Use solid and bright colors for high priority to notify
  • Use smooth or light background for other cases
Avatar UI design exploration
Call to action
Use side-nested icons / rounded buttons to clarify upcoming action when Avatar is clicked.

  • Swap the icon according to a result the user is about to expect
  • Apply the colors wisely to intense the meaning of the action
Avatar UI design exploration

Text & Captions

Avatar with sided text
In order to provide additional details, Avatar may be used with supportive titles. Mostly used in lists, application bars, tables, etc.

  • The larger caption to specify the persona's name
  • The subtitle is optional for additional info (e.g. status, last visit, role, followers amount, etc.)
Avatar UI design exploration
Avatar with bottom text
In templates, you may apply a larger Avatar with bottom-placed text. Mostly used in-app sections, like Profile, Settings, Social.
Avatar UI design exploration

UX & Usability

You may additionally indicate new user's events by adding a slightly distanced outline border around Avatar. The combination with badged counter is a strong engaging solution.
Avatar UI design exploration
There is an extra case for applying the stroke as a progress bar to represent Avatar's achievements ergonomically.
Avatar UI design exploration
The combination of stroke with confirming icon is solid user feedback of the selected state.
Avatar UI design exploration
The classic variant of selected state performed:
Avatar UI design exploration

Avatar group

Nested Button
When Avatars are stacked into a group, the call to action button could be used in case of user's action is required.

e.g. "Plus" button leads to the flow related to interaction with a group of Avatars — Adding, Sorting, Editing, etc.
Avatar UI design exploration
Nested Badge
Use a numeric badge to represent how many users are left behind the stack.
Avatar UI design exploration
Onhovered Badge
The frequent pattern for a badge when onhovered is to expand users' details.
Avatar UI design exploration
Onhovered Avatar
In a stack, you can show up the a full name using tooltip, when each userpic is onhovered.
Avatar UI design exploration
The most common use cases for Avatar is nesting into the Application Bar, or use a larger version in the Profile / Settings section, in order to be able to utilize edits for the user's picture.
Avatar UI design exploration
Avatar UI design exploration
This is all you need to know to design better Avatars.

If you looking for those Avatar cards - Duplicate for Figma

Hope my research will help you to improve your in-app UX. The next chapter is for the Accordions, probably. Stay tuned!
More useful tutorials
Avatar UI design exploration — The states of userpic component
Avatar (aka Userpic) — is a component used to represent a user's profile picture. The default content for Avatar is empty state, initials or user's picture.
Accordion UI design exploration — Styles, states, usage, templates
Accordion (aka Expansion panel) — is a vertically stacked list of options that can expand/collapse to reveal or hide more associated content.
Appbar UI design exploration — Anatomy, specs, states, templates
Application Bar (aka Appbar) — displays prior in-app controls related to the current app section.
Badge UI design exploration — Tips & tricks, usability, and use cases review
Badge (aka Tag) — small overlapped UI item which indicates a status, notification, or event that appears in relativity with the underlying object.
Breadcrumbs UI design exploration — Anatomy, UX tips, use cases overview
Breadcrumbs — is a composition of navigational links to reveal the current position in case of multi-level nested structure for a website, dashboard or application.
Buttons UI design – Comprehensive tutorial on UX, styles and usability
Designing buttons that work well requires taking into consideration the style, feedback, and accessibility. The design goal should be to make the them as intuitive as possible so the user can interact with Buttons seamlessly.
Dropdown UI design – A guide for Anatomy, UX tips, and Use cases
Unlock the power of Dropdowns. Discover the core elements, custom theming options, usability tips, and accessibility best practices. Design Dropdowns that captivate users and align with your brand's persona. Ready to embark on this design adventure? Let's dive in!
Chips UI Design – An essential tutorial for optimal UX & usability
Learn the step-by-step process of Chip design. Take a deep dive into component design and learn step-by-step with this comprehensive tutorial, including: Chips anatomy, States, Use cases and Usability tips.
Input UI Design – Optimize data forms UX with expertly crafted text fields
Follow this in-depth guide to create Input components that blend seamlessly with your app UI design, while optimizing forms filling experience and overall usability.
Checkbox UI design – Unlocking anatomy, proven UX tips, and inspiring use cases
This tutorial is dedicated to providing practical answers to your Checkbox design dilemmas: from addressing the complexity of Checkbox styling to solving the challenges of ensuring an inclusive UX.
Subscribe to Setproduct
Once per week we send a newsletter with new releases, freebies and blog publications

More to ☕ read

Show more ⬇︎