Svelte Avatar Component

Show an avatar in Svelte with a plain <img> URL, or drop in a copy-paste avatar component. Free placeholder profile pictures, no npm package, no API key.

Basic Usage

The fastest way to display an avatar in Svelte: point an <img> at a LoremFaces URL. No install, no config, works in Svelte and SvelteKit:

<img
  src="https://www.loremfaces.net/96/id/1.jpg"
  alt="User avatar"
  width="96"
  height="96"
  class="avatar"
/>

<style>
  .avatar {
    border-radius: 50%;
  }
</style>

Reusable Avatar Component

A flexible Svelte 5 component with props for size, ID, and a random face:

Avatar.svelte

<script>
  let {
    id = 1,
    size = 96,
    alt = 'User avatar',
    random = false,
  } = $props();

  // Random picks an ID once, so the face stays stable across updates
  const randomId = 1 + Math.floor(Math.random() * 5);
  const faceId = $derived(random ? randomId : id);
  const src = $derived(`https://www.loremfaces.net/${size}/id/${faceId}.jpg`);
</script>

<img {src} {alt} width={size} height={size} loading="lazy" class="avatar" />

<style>
  .avatar {
    border-radius: 50%;
    object-fit: cover;
  }
</style>

Usage

<script>
  import Avatar from './Avatar.svelte';
</script>

<Avatar id={2} size={128} />
<Avatar random size={48} />

Svelte 4: The same component works with export let id = 1; style props and a $: reactive statement for src instead of $derived.

URL Helper

A tiny helper module for generating avatar URLs anywhere in your app:

loremfaces.js

export function getAvatarUrl(size, id) {
  // No ID? Pick a random face (1-5)
  const faceId = id ?? 1 + Math.floor(Math.random() * 5);
  return `https://www.loremfaces.net/${size}/id/${faceId}.jpg`;
}

Avatar Stack

Display overlapping avatars for team previews with an {#each} block:

<div class="avatar-stack">
  {#each [1, 2, 3, 4, 5] as id, index}
    <img
      src={`https://www.loremfaces.net/48/id/${id}.jpg`}
      alt={`Team member ${id}`}
      width="48"
      height="48"
      style:margin-left={index === 0 ? '0' : '-12px'}
      class="avatar"
    />
  {/each}
</div>

<style>
  .avatar-stack {
    display: flex;
  }
  .avatar {
    border-radius: 50%;
    border: 2px solid white;
  }
</style>

SvelteKit Usage

LoremFaces URLs are plain external images, so they work in any +page.svelte or component with zero configuration. Because they render as static <img> tags, they add no JavaScript to your bundle and work with server-side rendering and prerendering out of the box.

Tip: For consistent user personas in prototypes, always use the same face ID for the same user throughout your app.

Next Steps

Check out more integration guides: