free animated avatars for your app: one img tag, zero design work

hi, prithvi here. i make globwall, and somewhere along the way i drew a few hundred little animated characters called globs. then i realized they'd make really nice avatars, so i open-sourced them. this post is about why default avatars are kind of sad, and how to swap them for something alive with basically zero work.

the grey circle problem

you know the one. a user signs up, doesn't upload a photo, and gets a grey circle with an initial in it. it works. it's also the most boring pixel on your whole app. and since most people never upload a photo, that grey circle ends up being what your product looks like.

a fun default avatar is one of those tiny things that makes an app feel made by humans. people screenshot it. they say "aw look at mine". that's free word of mouth.

what you can use

there are a few ways to get free avatars:

• placeholder avatar apis that generate shapes or initials from a name
• illustration packs you download and host yourself
• figma avatar packs for mockups
• lottie animations if you want them to move

the globs cover a few of these at once: there's a figma kit, 3d and lottie versions, and cdn urls so you can drop one in with an img tag.

the one img tag version

the simplest idea: give every user a glob based on their id, so the same person always gets the same character. in practice it looks like an img tag where the src is a cdn url with a number in it. you pick the number by hashing the user id and taking it mod the number of globs. same user, same glob, every time. no uploads, no storage, no design work.

here is the real cdn url pattern and a helper function you can drop straight into your code:

// CDN URL pattern: https://globwall.lol/blobs/blob-{1..300}.webp
export function getGlobAvatarUrl(userId: string): string {
  let hash = 0;
  for (let i = 0; i < userId.length; i++) {
    hash = (hash << 5) - hash + userId.charCodeAt(i);
    hash |= 0;
  }
  const globId = (Math.abs(hash) % 300) + 1;
  return `https://globwall.lol/blobs/blob-${globId}.webp`;
}

and in your JSX / HTML:

<img
  src={getGlobAvatarUrl(user.id)}
  alt={user.name ? `${user.name}'s avatar` : "User avatar"}
  width="48"
  height="48"
  loading="lazy"
  className="rounded-full bg-amber-50"
/>

making them move with lottie

lottie is a json format for animations. it's tiny compared to a video or gif, and it stays crisp at any size. if you want the avatar to actually bounce or blink, you load the lottie json with the lottie player (there are react, vue and plain js versions) and point it at the glob's file.

here is how you embed an animated avatar in React using @lottiefiles/react-lottie-player:

import React from "react";
import { Player } from "@lottiefiles/react-lottie-player";

export function AnimatedGlobAvatar({ globId = 1 }: { globId?: number }) {
  return (
    <Player
      autoplay
      loop
      // Point this to your hosted Lottie JSON asset
      src={`/animations/glob-${globId}.json`}
      style={{ height: "64px", width: "64px" }}
    />
  );
}

a tip: don't animate every avatar on a long list. it gets busy and costs battery. animate the user's own avatar, or animate on hover. keep the rest as a still frame.

for designers: the figma kit

if you're mocking up a product, real-looking avatars make it feel finished. duplicate the globwall figma kit, and you've got glob components ready to drop into user lists, comments, team pages. it beats pasting stock photos of strangers into your mockups.

licensing, plainly

this is the bit people skip and regret. before you use any avatar pack in a real product, check the license says commercial use is ok, and whether you need attribution. the glob avatars are open-source; check the repo's license file for the exact terms, and if you're unsure, just ask me.

why i gave them away

honestly? i liked them too much to keep them on one wall. and if your app's users end up with a little glob next to their name, that's the nicest kind of marketing i can imagine. it's the same reason globwall exists: small, fun things that make the internet feel less grey.

if you are getting ready to launch your product, check out our list of 100+ free places to launch your startup in 2026 (with dofollow links).

quick checklist

• pick: static (img tag) or animated (lottie)
• map user id to a glob number so it's stable
• animate sparingly
• check the license
• tell me when you ship it, i want to see

if you want your own product on the actual wall, each glob there links to a founder's product with a dofollow link: https://globwall.lol

see you on the internet, prithvi (@therealprineur)