--- title: "Avatar UI: anatomy, variants and examples | Kombai" description: "An avatar is a small photo, set of initials or logo that stands for a person, team or account wherever it appears." canonical_url: https://kombai.com/glossary/avatar/ author: "The Kombai Team" --- # Avatar An avatar is a small photo, set of initials or logo that stands for a person, team or account wherever it appears. - Also called: profile picture - Platforms: Web, Mobile - In the Kombai gallery: [55 web designs](https://kombai.com/gallery/web/avatar/), [35 mobile designs](https://kombai.com/gallery/mobile/avatar/) - [Mosslight](https://kombai.com/gallery/inspirations/avatar-ios-14/) (Mobile) - [Pitchcraft](https://kombai.com/gallery/inspirations/avatar-web-44/) (Web) - [Xanthe](https://kombai.com/gallery/inspirations/avatar-ios-31/) (Mobile) ## What is an avatar? An avatar is a small image that identifies who did something or who something belongs to. It is usually a profile photo cropped to a circle, with the person's initials on a colored background when there is no photo, and it often carries a small badge for status. - The same person gets the same avatar everywhere, so people learn to spot them. - Circles usually mean people; rounded squares often mean teams, workspaces or brands. ## When to use avatar - **Showing who.** Authors of comments, senders of messages and owners of tasks. - **Lists of people.** Members, followers and search results, where a face is faster to spot than a name. - **The account menu.** The signed-in person's avatar is the button that opens their settings. ## When not to use one - **Content that is not about people.** Files and features need icons, not faces. - **Avatars without names.** Outside of stacks, print the name next to the avatar. Faces alone are hard to tell apart. - **Large photos.** A full profile photo or a hero image is an image, not an avatar. ## Anatomy 1. **Image**: A photo, cropped to a circle 2. **Initials**: The fallback with no photo 3. **Status badge**: Online, away or busy 4. **Group**: Overlapping, with a +N count 5. **States**: Photo, initials, empty, focus ## Variants We sorted every avatar design in the Kombai gallery and found six patterns. ### 1. Photo avatars in rows A round photo leading a row with a name, a handle and an action like Follow or a checkbox. - [Sonnet Labs](https://kombai.com/gallery/inspirations/avatar-ios-25/) (Mobile) - [Guildleaf](https://kombai.com/gallery/inspirations/avatar-web-34/) (Web) - [Bluehour](https://kombai.com/gallery/inspirations/avatar-ios-24/) (Mobile) ### 2. Initials One or two letters on a tinted circle or square, for people who have not added a photo and for teams. - [Kilnwood](https://kombai.com/gallery/inspirations/avatar-ios-18/) (Mobile) - [Ellery](https://kombai.com/gallery/inspirations/avatar-ios-12/) (Mobile) - [Daymark](https://kombai.com/gallery/inspirations/avatar-web-40/) (Web) ### 3. Avatar groups Overlapping avatars that show who is in a project, a chat or a program, often ending in a count of the rest. - [Threadline](https://kombai.com/gallery/inspirations/avatar-web-48/) (Web) - [Quillon](https://kombai.com/gallery/inspirations/avatar-ios-26/) (Mobile) - [Alder & Vale](https://kombai.com/gallery/inspirations/avatar-web-3/) (Web) ### 4. Logo avatars Brand marks cropped to the same circle as people, for merchants, networks and partners. - [Fernwick](https://kombai.com/gallery/inspirations/avatar-ios-1/) (Mobile) - [Vellum House](https://kombai.com/gallery/inspirations/avatar-ios-35/) (Mobile) - [Ravello](https://kombai.com/gallery/inspirations/avatar-ios-27/) (Mobile) ### 5. Large profile avatars A big centered avatar at the top of a profile or an edit screen, sometimes ringed with progress or marked verified. - [Cindermoor](https://kombai.com/gallery/inspirations/avatar-ios-20/) (Mobile) - [Oakhaven](https://kombai.com/gallery/inspirations/avatar-ios-22/) (Mobile) - [Alderbrook](https://kombai.com/gallery/inspirations/avatar-ios-2/) (Mobile) ### 6. Account menus The signed-in person's avatar in a corner opens a menu with their name, email, settings and sign out. - [Peopleharbor](https://kombai.com/gallery/inspirations/avatar-web-52/) (Web) - [Emberlane](https://kombai.com/gallery/inspirations/avatar-web-2/) (Web) - [Paloma](https://kombai.com/gallery/inspirations/avatar-ios-15/) (Mobile) ## Where avatars show up ### Profile settings A photo with Upload, Change and Remove buttons, next to the name and email fields. - [Pinehollow](https://kombai.com/gallery/inspirations/avatar-web-11/) (Web) - [Commonroom](https://kombai.com/gallery/inspirations/avatar-web-45/) (Web) - [Palewood](https://kombai.com/gallery/inspirations/avatar-web-16/) (Web) ### Teams and members Member tables and team directories, with one avatar per person and a cluster for each team. - [Wrenfield](https://kombai.com/gallery/inspirations/avatar-web-21/) (Web) - [Northmill](https://kombai.com/gallery/inspirations/avatar-web-37/) (Web) - [Axisloom](https://kombai.com/gallery/inspirations/avatar-web-15/) (Web) ### Reviews and comments Each review, tip or post starts with the author's avatar, so a thread reads as a conversation. - [Calliope](https://kombai.com/gallery/inspirations/avatar-ios-5/) (Mobile) - [Ironbell](https://kombai.com/gallery/inspirations/avatar-ios-16/) (Mobile) - [Bracken](https://kombai.com/gallery/inspirations/avatar-web-20/) (Web) ## Avatar vs similar components | | [Avatar](https://kombai.com/glossary/avatar/) | [Status indicator](https://kombai.com/glossary/status-indicator/) | [Card](https://kombai.com/glossary/card/) | |---|---|---|---| | Shows | Who a person or account is | The state of something | Content about one thing | | Size | Small, often round | A dot, badge or icon | A block with room for text | | Best for | Lists, comments and account menus | Online, unread or error states | Profiles and listings | ## Build notes - Give a photo avatar alt text that names the person, or alt="" when the name is printed right beside it. - Fall back to initials on a colored background when there is no photo or it fails to load. - Pair a status dot with text or an accessible name, like "Online", so color is not the only signal. - Initials are text, so they need 4.5:1 contrast with their background (3:1 when large). A status dot needs 3:1 against the colors around it. - Make the +N in a group a button with a name like "Show 3 more people". - When an avatar opens the account menu, make it a