7 Pure CSS1 with JSPublished 2026-10-04Free · no sign-up
Eight avatar patterns: initial avatars in four sizes, an overlapping group with a counter, story and presence rings, a name and role block, an editable profile photo, different shapes, a photo with an initials fallback and a team list with role selectors.
Initial avatars in four sizes from one class and a size custom property, with colour picked per person. Initials are used when there is no photo; the element has role="img" and the person's full name as its accessible name.
A stack of overlapping avatars with a +5 counter, used to show who is in a project. Negative margins create the overlap, a ring in the background colour separates each face, and the list has a label that says how many people there are.
Avatars with a coloured ring for stories or live status and a dot for online presence. The ring is a conic gradient behind the avatar, so it can show partial progress, and the status is included in each avatar's accessible name.
The avatar, name and role block used in comments, author bylines and team lists. A compact grid aligns the avatar with two lines of text, the avatar is decorative because the name is right next to it, and long names truncate cleanly.
A profile picture with an edit button overlay for changing the photo. The button wraps a hidden file input so it opens the picker with keyboard and mouse, accepts images only, and previews the chosen picture immediately with an object URL.
document.getElementById('ape-f').addEventListener('change', e => {
const f = e.target.files[0];
if (f) document.getElementById('ape-i').src = URL.createObjectURL(f);
});
06. Avatar Shapes
AvatarShape
The same avatar in four shapes: circle, rounded square, squircle and hexagon. Shapes come from border-radius values and a clip-path polygon, so you can pick one per entity type, such as circles for people and squares for teams.
An avatar that shows a photo when it loads and falls back to initials when the image is missing or broken. The initials sit behind the image, and a one-line onerror handler hides a failed image so the fallback shows through.
A team member list with avatars, names, roles and a role selector for each person. Every select is labelled with the person's name, such as Role for Kim Lee, so a screen reader user knows whose role they are changing.
View code
<ul class="avl">
<li><span style="--c:#f472b6" aria-hidden="true">KL</span><div><b>Kim Lee</b><small>kim@shop.co</small></div><select aria-label="Role for Kim Lee"><option>Owner</option><option>Editor</option></select></li>
<li><span style="--c:#60a5fa" aria-hidden="true">RS</span><div><b>Raj Singh</b><small>raj@shop.co</small></div><select aria-label="Role for Raj Singh"><option>Editor</option><option>Owner</option></select></li>
<li><span style="--c:#34d399" aria-hidden="true">EM</span><div><b>Eva Morel</b><small>eva@shop.co</small></div><select aria-label="Role for Eva Morel"><option>Viewer</option><option>Editor</option></select></li>
</ul>
If the name is printed next to the avatar, hide the avatar from screen readers so the name is not read twice. When the avatar stands alone, give it role="img" and the person's name as its label.
Initials as a fallback
Layer initials behind the photo and remove the image if it fails to load. People without a photo still get a recognisable, coloured avatar instead of a broken image icon.
Status needs words
Online, away and busy dots should be described in text or in the avatar's accessible name. A green dot on its own means nothing to a screen reader or to someone who cannot see the colour.
Groups
Overlapping groups use negative margins and a ring in the background colour to separate faces. Label the list with the total, such as 9 team members, and show a +5 counter for the rest.
Frequently asked questions
Which demos need JavaScript?
The photo picker and the fallback handler. The others are CSS only.
What size should avatars be?
Around 32 to 40 pixels in lists and 64 to 96 on profile pages.
Can I use real photos?
Yes. Use img with object-fit: cover and alt text with the person's name.