Astro Avatar Component

Show an avatar in Astro with a plain <img> URL, or drop in a copy-paste .astro component. Free placeholder profile pictures, zero JavaScript shipped, no API key.

Basic Usage

The fastest way to display an avatar in Astro: point an <img> at a LoremFaces URL in any .astro page. No install, no config, no client-side JavaScript:

<img
  src="https://www.loremfaces.net/96/id/1.jpg"
  alt="User avatar"
  width="96"
  height="96"
  style="border-radius: 50%"
/>

Reusable Avatar Component

A flexible .astro component with props for size, ID, and a random face:

Avatar.astro

---
interface Props {
  id?: 1 | 2 | 3 | 4 | 5;
  size?: 24 | 42 | 48 | 96 | 128 | 256;
  alt?: string;
  random?: boolean;
}

const { id = 1, size = 96, alt = 'User avatar', random = false } = Astro.props;

// Astro components render at build/request time, so this picks a face per render
const faceId = random ? 1 + Math.floor(Math.random() * 5) : id;
const src = `https://www.loremfaces.net/${size}/id/${faceId}.jpg`;
---

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

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

Usage

---
import Avatar from '../components/Avatar.astro';
---

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

Note: On statically built pages, random picks the face once at build time. For a face that changes on every page load, pick the ID in a small inline <script> instead.

Avatar Row

Map over face IDs for team sections and testimonial mockups:

---
const ids = [1, 2, 3, 4, 5];
---

<div class="avatar-row">
  {ids.map((id) => (
    <img
      src={`https://www.loremfaces.net/48/id/${id}.jpg`}
      alt={`Team member ${id}`}
      width="48"
      height="48"
    />
  ))}
</div>

<style>
  .avatar-row {
    display: flex;
    gap: 0.5rem;
  }
  .avatar-row img {
    border-radius: 50%;
  }
</style>

With astro:assets

To run LoremFaces avatars through Astro's image optimization, authorize the domain in astro.config.mjs, then use the Image component:

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  image: {
    domains: ['www.loremfaces.net'],
  },
});

---
import { Image } from 'astro:assets';
---

<Image
  src="https://www.loremfaces.net/256/id/3.jpg"
  alt="User avatar"
  width={256}
  height={256}
/>

The images are already pre-sized and CDN-cached, so plain <img> tags are usually all you need.

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

Next Steps

Check out more integration guides: