Avatars and profile pictures

Dummy avatar and profile image URLs

Use initials on a colored square as a stand-in profile picture. Set the size, initials and colors in the URL and round it with CSS.

Open the generator

200 x 200 example from DummyImg

Avatar image URLs

Initials, 200 x 200

https://www.dummyimg.in/placeholder?width=200&height=200&text=JD&bg_color=%23245bd8&text_color=%23ffffff

Profile, 100 x 100

https://www.dummyimg.in/placeholder?width=100&height=100&text=AB&bg_color=%230f9f6e&text_color=%23ffffff

Small, 64 x 64

https://www.dummyimg.in/placeholder?width=64&height=64&text=SK&bg_color=%23f59e0b&text_color=%23111827

Tiny, 32 x 32

https://www.dummyimg.in/placeholder?width=32&height=32&text=A&bg_color=%23183f9d&text_color=%23ffffff

Neutral user

https://www.dummyimg.in/placeholder?width=200&height=200&text=User&bg_color=%23d3d3d3&text_color=%23ffffff

Large, 512 x 512

https://www.dummyimg.in/placeholder?width=512&height=512&text=MK&bg_color=%23111827&text_color=%23ffffff

Making round avatars

The images are square. To get a round avatar, set border-radius: 50% on the image, as in the CSS snippet below. Pick the image size at twice the displayed size (for example 96 x 96 for a 48 px avatar) so it stays sharp on high-density screens.

For seed data, build the URL from each user's initials and give every user a color from a short palette, so lists and comment threads look realistic without real photos.

HTML + CSS

<img class="avatar" alt="Jane Doe"
     src="https://www.dummyimg.in/placeholder?width=96&height=96&text=JD&bg_color=%23245bd8&text_color=%23ffffff">

.avatar { width: 48px; height: 48px; border-radius: 50%; }

JavaScript seed data

const colors = ["245bd8", "0f9f6e", "f59e0b", "183f9d"];
const avatar = (name, i) => {
  const initials = name.split(" ").map((p) => p[0]).join("");
  return `https://www.dummyimg.in/placeholder?width=96&height=96&text=${initials}&bg_color=%23${colors[i % 4]}&text_color=%23ffffff`;
};

Questions

Can I get a round dummy avatar?

The image is square; make it round with border-radius: 50% in CSS.

What size should a dummy profile picture be?

Use about twice the size it is shown at: 64 x 64 for a 32 px avatar, 200 x 200 for a 100 px profile picture.

Can I use full names instead of initials?

Yes, text= accepts up to 240 characters, but two initials read best at small sizes.