DEV Community

Cover image for Your app looks like sh*t when users don’t upload avatars
Anthony Riera
Anthony Riera

Posted on • Edited on

Your app looks like sh*t when users don’t upload avatars

I love making good polished UIs. If you’re reading this, chances are you do too.

But you know the story.

You ship a clean UI.
Everything looks sharp.
Then users sign up… and never upload a profile picture.

Now your app is full of empty circles, broken layouts, or that sad default avatar everyone pretends is fine (it’s not, I hate it so much).

I got tired of it, so I built Facehash.

Facehash generates simple, deterministic avatars from a name.
Same name, same face. No randomness. No API calls. Simple React component.

import { Avatar, AvatarImage, AvatarFallback } from "facehash";

<Avatar>
  <AvatarImage src="/photo.jpg" />
  <AvatarFallback name="anthony" />
</Avatar>
Enter fullscreen mode Exit fullscreen mode

How the lib works in action

A few things that mattered to me:

  • Works with any React setup (Next.js, Vite, Remix, whatever)
  • Easy to style with Tailwind or plain CSS
  • Looks decent out of the box

I’m already using it in real products, especially anywhere avatars show up a lot (dashboards, chats, support tools, can also be used for your AI agents).

Once you drop it in, your UI just… stops looking unfinished.

There are also a couple of dumb hidden things on the landing page.
If you find them, congrats, I didn't spend those extra Claude tokens for nothing.

Side note: this came out of building Cossistant, it a customer support platform where avatars actually matter because humans and AI are both in the loop. Facehash is just one of those tiny pieces that quietly makes it feel more polished and I wanted to make it a lib!

Cossistant dashboard with profile pictures

Steal it. Ship it.

Your users still won’t upload photos and you know it, but at least your app won’t look broken.

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.