Components
Avatar
An avatar is a small image, usually a circle, that stands for one person through a photo, an illustration or their initials, next to their name.
- Also called
- Profile picture, User image, Profile photo, Author avatar
- Spotted on
- 26 of 422 homepages
What is an avatar?
Avatars put a face on words. On a SaaS marketing site they appear wherever a real person is speaking or being credited: beside a testimonial quote, under a blog post title, on a team grid on the about page. Kiro's quote cards carry round avatars next to each signature, and Firecrawl's blog cards show an author avatar beside the date.
They also turn up inside product mockups, where a few avatars in a chat thread or a shared document make the interface look used by a team. Basecamp closes its about page with a small avatar beside a name and title, which reads more like a signed letter than a corporate footer.
The weak avatar is the generic one: stock headshots, grey silhouettes or a broken image where a photo should be. A missing or fake face undermines the very quote it sits next to. Use real photos with consistent cropping, and fall back to initials on a brand-colored circle rather than a placeholder.
When to use an avatar, and when not to
Use it for
- Quoted peopleA testimonial or case study names a real customer, and their face makes the quote more believable.
- Authored contentBlog posts and changelog entries benefit from showing who wrote them.
- Showing collaborationA mockup needs to suggest several people working together in the product.
Avoid it for
- No real photoA stock face or grey silhouette is worse than none; use initials or drop the image.
- Crowds of peopleDozens of faces in a row work better as an overlapping avatar stack with a count.
- Company logosA logo for an organization belongs in a logo cloud or tile, not in a person-shaped circle.
Anatomy of an avatar
- 1FrameA circle or rounded square, typically 24-48px, that crops the image consistently.
- 2Image or initialsA photo, an illustration or one to two letters on a solid background as a fallback.
- 3Border or ringAn optional thin ring that separates the avatar from busy backgrounds.
- 4Name and roleThe text beside it that says who this is, which the avatar only supports.
Common avatar variants
1. Photo avatar
A real headshot, the default for testimonials and team pages.
2. Initials avatar
Letters on a colored circle, used when no photo exists or for a tidier, uniform look.
3. Illustrated avatar
Cartoon or drawn portraits, which suit playful brands and keep a team page visually consistent.
4. Avatar with status
A small dot on the edge showing online or busy, mostly seen inside product mockups.
Spotted in our design reviews
Our reviews describe an avatar on 26 of the 422 SaaS homepages in the catalog. A few of them:
Under "Try the real Velozity office below." a framed app window begins, with "Workspace" and "AI Space" tabs, a grid of cabin cards holding avatars, and a "Floors" side panel listing "Growhut HQ".
Velozity · Above the fold
Two rows of round avatars linked by dotted lines precede "Thousands of models contributed by our community", with "Explore models" in black and "Push a model" outlined.
Replicate · Task pills, model cards and community pitch
The Sourcing panel shows "I've found 26 candidates for you to review." above a "Candidate Pack" card with four avatars.
Metaview · Agent tabs, outbound CTA and results cards
A gradient-bordered card with four cartoon avatars announces "Introducing the all-new AI Teammates" with a "Meet AI Teammates" button.
Teamwork · Proof, AI card and feature rows
The Raise diagram feeds investor avatars into a "Roll Up Vehicle (RUV)" box, and the Consolidate diagram lists four stakeholder rows under a "Consolidation Vehicle" bar.
Rollups · Two ways and three case studies
Four numbered rows follow, each alternating illustration and text: "01." automations with a calendar mock, "02." visibility with a team checklist, "03." build distribution with avatar diagram, and "04." release health with eight metric tiles.
Runway · Integrations and numbered features
A rounded dark support card immediately follows, centering “Supported by you & 26,525 other builders” over a contribution button and a scatter of circular avatars.
Onlook · Scope and community proof
Each has a small avatar, a bold name such as "Jay F.
Juno · AI agents block and testimonial wall
Often confused with
Avatar vs. avatar stack
An avatar represents one person. An avatar stack overlaps several avatars, often with a "+N" count, to suggest a crowd of users rather than to identify anyone.
Avatar vs. testimonial section
A testimonial section is the whole block of quotes. The avatar is one small part of each quote's attribution.
Frequently asked
Should avatars be circles or squares?
Circles are the convention for people and signal "this is a person" instantly. Rounded squares can work if the rest of the site uses square corners, but keep logos square so the two never get confused.
What size should a testimonial avatar be?
Large enough to recognize a face, usually 40-56px beside a quote. Smaller than that and it reads as decoration; much larger and it competes with the quote itself.