Avatar placeholders

The most common use for Suils is a default profile picture: when a user hasn't uploaded a photo, show a Suils avatar generated from their ID. Because it's deterministic, the same user always sees the same placeholder.

The pattern

Keep the user's real photo URL if they have one; otherwise fall back to a Suils URL keyed on a stable identifier:

function avatarUrl(user: { id: string; photoUrl?: string }): string {
  return (
    user.photoUrl ??
    `https://avatars.suils.es/suils/svg?seed=${encodeURIComponent(user.id)}`
  );
}

<img :src="avatarUrl(user)" width="96" height="96" alt="" />

Pick a style that fits your product

Any of the 175 styles works — pick one that matches your brand and use it consistently:

https://avatars.suils.es/minimal/svg?seed=Ada

https://avatars.suils.es/kawaii/svg?seed=Ada

https://avatars.suils.es/pixel/svg?seed=Ada

https://avatars.suils.es/bear/svg?seed=Ada

TIP

Use the same seed (e.g. the user ID) everywhere so the placeholder stays stable across pages, emails, and sessions.