Lorem Faces

https://www.loremfaces.net/docs
Admin
Lorem Faces provides five AI-generated placeholder avatars via simple URLs for easy integration into...
Tokens:7,258
Snippets:74
Trust Score:6.8
Update:3 months ago
Show doc for...
Tokens:
Raw
### Use Avatar Component

Source: https://www.loremfaces.net/docs/vue.html

Example implementation of the Avatar component with specific props.

```vue
<template>
  <Avatar :id="2" :size="128" />
  <Avatar random :size="48" />
</template>
```

--------------------------------

### Implement Avatar in Nuxt 3

Source: https://www.loremfaces.net/docs/vue.html

Example of an Avatar component optimized for Nuxt 3 using NuxtImg.

```vue
<!-- components/Avatar.vue -->
<script setup lang="ts">
const props = defineProps<{
  id?: 1 | 2 | 3 | 4 | 5
  size?: 24 | 42 | 48 | 96 | 128 | 256
}>()

const src = computed(() =>
  `https://www.loremfaces.net/${props.size ?? 96}/id/${props.id ?? 1}.jpg`
)
</script>

<template>
  <NuxtImg
    :src="src"
    :width="size ?? 96"
    :height="size ?? 96"
    loading="lazy"
    class="rounded-full"
  />
</template>
```

--------------------------------

### Use Avatar Component in Template

Source: https://www.loremfaces.net/docs/angular.html

Example usage of the custom app-avatar component with static and random inputs.

```html
<app-avatar [id]="2" [size]="128" />
<app-avatar random [size]="48" />
```

--------------------------------

### GET /{size}/id/{id}.jpg

Source: https://www.loremfaces.net/docs

Retrieves a specific placeholder avatar image based on the requested size and face ID.

```APIDOC
## GET /{size}/id/{id}.jpg

### Description
Retrieves a square placeholder avatar image. The face ID ensures consistent results across different sizes.

### Method
GET

### Endpoint
https://www.loremfaces.net/{size}/id/{id}.jpg

### Parameters
#### Path Parameters
- **size** (integer) - Required - The square dimension in pixels. Supported values: 24, 42, 48, 96, 128, 256.
- **id** (integer) - Required - The face ID to retrieve. Supported values: 1, 2, 3, 4, 5.

### Response
#### Success Response (200)
- **image/jpeg** (binary) - The requested avatar image.
```

--------------------------------

### Basic Usage with next/image

Source: https://www.loremfaces.net/docs/nextjs.html

Use the Image component for automatic optimization of avatar images.

```jsx
import Image from 'next/image'

export default function UserProfile() {
  return (
    <Image
      src="https://www.loremfaces.net/96/id/1.jpg"
      alt="User avatar"
      width={96}
      height={96}
      className="rounded-full"
    />
  )
}Copy
```

--------------------------------

### Configure astro:assets for LoremFaces

Source: https://www.loremfaces.net/docs/astro.html

Authorize the LoremFaces domain in astro.config.mjs and use the Image component for optimization.

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

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

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

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

--------------------------------

### Implement Basic Avatar Usage

Source: https://www.loremfaces.net/docs

Use standard HTML image tags to display avatars or generate random ones client-side.

```html
<!-- Basic usage -->
<img src="https://www.loremfaces.net/96/id/1.jpg" alt="User avatar">

<!-- Random face on each page load: pick a random ID (1-5) -->
<img id="avatar" alt="Random avatar">
<script>
  avatar.src = `https://www.loremfaces.net/96/id/${1 + Math.floor(Math.random() * 5)}.jpg`;
</script>
```

--------------------------------

### Configure Next.js Image Domains

Source: https://www.loremfaces.net/docs/nextjs.html

Add the LoremFaces domain to remotePatterns in next.config.js to allow image optimization.

```javascript
// next.config.js (Next.js 13+)
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'www.loremfaces.net',
        pathname: '/**',
      },
    ],
  },
}

module.exports = nextConfigCopy
```

--------------------------------

### Import and Use Avatar Component

Source: https://www.loremfaces.net/docs/svelte.html

Import the Avatar component and pass props to customize the display.

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

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

--------------------------------

### Display Basic Avatar with HTML

Source: https://www.loremfaces.net/docs/vue.html

The simplest implementation using a standard img tag with a LoremFaces URL.

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

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

--------------------------------

### Basic React Avatar Usage

Source: https://www.loremfaces.net/docs/react.html

The simplest implementation using a direct URL for an image element.

```jsx
function UserProfile() {
  return (
    <img
      src="https://www.loremfaces.net/96/id/1.jpg"
      alt="User avatar"
      width={96}
      height={96}
      style={{ borderRadius: '50%' }}
    />
  );
}
```

--------------------------------

### Import and use Avatar component

Source: https://www.loremfaces.net/docs/astro.html

Import the Avatar component into an Astro page and pass props to control appearance.

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

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

--------------------------------

### Server Component Usage

Source: https://www.loremfaces.net/docs/nextjs.html

Demonstrates fetching data and rendering avatars within a React Server Component.

```tsx
// app/users/page.tsx (Server Component)
import { Avatar } from '@/components/avatar'

interface User {
  id: number
  name: string
  avatarId: 1 | 2 | 3 | 4 | 5
}

async function getUsers(): Promise<User[]> {
  // Fetch users from your API
  return [
    { id: 1, name: 'Alice', avatarId: 1 },
    { id: 2, name: 'Bob', avatarId: 2 },
    { id: 3, name: 'Charlie', avatarId: 3 },
  ]
}

export default async function UsersPage() {
  const users = await getUsers()

  return (
    <div className="grid gap-4">
      {users.map(user => (
        <div key={user.id} className="flex items-center gap-3">
          <Avatar id={user.avatarId} size={48} />
          <span>{user.name}</span>
        </div>
      ))}
    </div>
  )
}Copy
```

--------------------------------

### Generate Avatar URLs via JavaScript

Source: https://www.loremfaces.net/docs

Helper functions to construct static or random avatar URLs dynamically.

```javascript
// Generate avatar URL
function getAvatarUrl(size, id) {
  return `https://www.loremfaces.net/${size}/id/${id}.jpg`;
}

// Random avatar URL (picks a random ID 1-5)
function getRandomAvatarUrl(size) {
  return getAvatarUrl(size, 1 + Math.floor(Math.random() * 5));
}

// Usage
const avatar = getAvatarUrl(96, 1);
console.log(avatar); // https://www.loremfaces.net/96/id/1.jpg
```

--------------------------------

### Generate Avatar URLs with Helper Module

Source: https://www.loremfaces.net/docs/svelte.html

A utility function to generate avatar URLs dynamically within your application logic.

```javascript
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`;
}
```

--------------------------------

### Usage Without Image Optimization

Source: https://www.loremfaces.net/docs/nextjs.html

Fallback method using standard HTML img tags when next/image is not required.

```jsx
// No configuration needed for regular img tags
export function SimpleAvatar({ id = 1, size = 96 }) {
  return (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={`https://www.loremfaces.net/${size}/id/${id}.jpg`}
      alt="User avatar"
      width={size}
      height={size}
      className="rounded-full"
      loading="lazy"
    />
  )
}Copy
```

--------------------------------

### Implement Avatar Stack

Source: https://www.loremfaces.net/docs/svelte.html

Display a group of overlapping avatars using an each block and CSS styling.

```svelte
<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>
```

--------------------------------

### Create reusable Avatar component

Source: https://www.loremfaces.net/docs/astro.html

Define an Astro component with props for size, ID, and random selection to standardize avatar rendering.

```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>
```

--------------------------------

### Implement Avatar URL Service

Source: https://www.loremfaces.net/docs/angular.html

An injectable service for generating avatar URLs dynamically throughout an application.

```typescript
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class AvatarService {
  getUrl(size: number, id?: number): string {
    // 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`;
  }
}
```

--------------------------------

### Reference Consistent Face IDs

Source: https://www.loremfaces.net/docs

Demonstrates how the same face ID returns consistent imagery across different requested dimensions.

```text
// Same person, different sizes
https://www.loremfaces.net/24/id/1.jpg  // 24x24
https://www.loremfaces.net/96/id/1.jpg  // 96x96
https://www.loremfaces.net/256/id/1.jpg // 256x256
```

--------------------------------

### Embed Avatars in Markdown

Source: https://www.loremfaces.net/docs

Standard Markdown syntax for embedding images.

```markdown
![User Avatar](https://www.loremfaces.net/96/id/1.jpg)
```

--------------------------------

### Display Avatar Lists

Source: https://www.loremfaces.net/docs

Group multiple avatars within a container for UI lists.

```html
<!-- Avatar list -->
<div class="avatar-list">
  <img src="https://www.loremfaces.net/48/id/1.jpg" alt="User 1">
  <img src="https://www.loremfaces.net/48/id/2.jpg" alt="User 2">
  <img src="https://www.loremfaces.net/48/id/3.jpg" alt="User 3">
</div>
```

--------------------------------

### Display Avatar Stack with Control Flow

Source: https://www.loremfaces.net/docs/angular.html

Uses the Angular 17+ @for control flow to render a list of overlapping avatars.

```html
<div style="display: flex">
  @for (id of [1, 2, 3, 4, 5]; track id; let index = $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'"
      style="border-radius: 50%; border: 2px solid white"
    />
  }
</div>
```

--------------------------------

### Create Avatar Stack Component

Source: https://www.loremfaces.net/docs/vue.html

A component for displaying overlapping avatars, useful for team previews.

```vue
<script setup lang="ts">
interface Props {
  count?: number
  size?: number
}

const props = withDefaults(defineProps<Props>(), {
  count: 5,
  size: 48,
})

const avatars = computed(() =>
  Array.from({ length: Math.min(props.count, 5) }, (_, i) => i + 1)
)
</script>

<template>
  <div class="avatar-stack">
    <img
      v-for="(id, index) in avatars"
      :key="id"
      :src=`https://www.loremfaces.net/${size}/id/${id}.jpg`
      :alt=`Team member ${id}`
      :width="size"
      :height="size"
      :style="{ marginLeft: index === 0 ? 0 : '-12px' }"
      class="avatar"
    />
  </div>
</template>

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

--------------------------------

### Avatar with Error Fallback

Source: https://www.loremfaces.net/docs/react.html

Handles image loading errors by displaying a placeholder UI.

```jsx
function Avatar({ id, size = 96 }) {
  const [error, setError] = useState(false);

  if (error) {
    return (
      <div
        style={{
          width: size,
          height: size,
          borderRadius: '50%',
          background: '#e0e0e0',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        ?
      </div>
    );
  }

  return (
    <img
      src={`https://www.loremfaces.net/${size}/id/${id}.jpg`}
      alt="Avatar"
      width={size}
      height={size}
      onError={() => setError(true)}
      style={{ borderRadius: '50%' }}
    />
  );
}
```

--------------------------------

### Integrate with NgOptimizedImage

Source: https://www.loremfaces.net/docs/angular.html

Utilizes the NgOptimizedImage directive for improved performance and lazy loading.

```typescript
import { NgOptimizedImage } from '@angular/common';

@Component({
  standalone: true,
  imports: [NgOptimizedImage],
  template: `
    <img
      ngSrc="https://www.loremfaces.net/128/id/3.jpg"
      alt="User avatar"
      width="128"
      height="128"
      priority
    />
  `,
})
export class ProfileComponent {}
```

--------------------------------

### Display basic avatar with img tag

Source: https://www.loremfaces.net/docs/astro.html

Use a standard HTML img tag to display a LoremFaces avatar without any additional configuration.

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

--------------------------------

### Render avatar row

Source: https://www.loremfaces.net/docs/astro.html

Map over an array of IDs to generate a row of avatars for team or testimonial sections.

```astro
---
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>
```

--------------------------------

### Generate URLs with Composable

Source: https://www.loremfaces.net/docs/vue.html

A composable function to generate avatar URLs dynamically, including usage within a component.

```typescript
export function useLoremFaces() {
  const getUrl = (
    size: 24 | 42 | 48 | 96 | 128 | 256,
    id?: 1 | 2 | 3 | 4 | 5
  ): string => {
    // 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`
  }

  const sizes = [24, 42, 48, 96, 128, 256] as const
  const ids = [1, 2, 3, 4, 5] as const

  return { getUrl, sizes, ids }
}

// Usage in component
<script setup>
import { useLoremFaces } from './useLoremFaces'

const { getUrl, ids } = useLoremFaces()
</script>

<template>
  <div>
    <img
      v-for="id in ids"
      :key="id"
      :src="getUrl(48, id)"
      :alt=`User ${id}`
    />
  </div>
</template>
```

--------------------------------

### Avatar Stack with Tailwind

Source: https://www.loremfaces.net/docs/nextjs.html

Creates a stacked avatar UI component using Tailwind CSS for spacing.

```tsx
import Image from 'next/image'

interface AvatarStackProps {
  count?: number
  size?: number
}

export function AvatarStack({ count = 5, size = 48 }: AvatarStackProps) {
  const avatars = Array.from(
    { length: Math.min(count, 5) },
    (_, i) => i + 1
  )

  return (
    <div className="flex -space-x-3">
      {avatars.map(id => (
        <Image
          key={id}
          src={`https://www.loremfaces.net/${size}/id/${id}.jpg`}
          alt={`Team member ${id}`}
          width={size}
          height={size}
          className="rounded-full ring-2 ring-white"
        />
      ))}
    </div>
  )
}Copy
```

--------------------------------

### Avatar with Styled Components

Source: https://www.loremfaces.net/docs/react.html

Integrates LoremFaces with the styled-components library for custom styling.

```tsx
import styled from 'styled-components';

const StyledAvatar = styled.img<{ size: number }>`
  width: ${props => props.size}px;
  height: ${props => props.size}px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
`;

function Avatar({ id = 1, size = 96 }) {
  return (
    <StyledAvatar
      src={`https://www.loremfaces.net/${size}/id/${id}.jpg`}
      size={size}
      alt="User avatar"
    />
  );
}
```

--------------------------------

### Apply CSS Background Avatars

Source: https://www.loremfaces.net/docs

Use CSS background properties to style elements with avatar images.

```css
.user-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-image: url('https://www.loremfaces.net/96/id/1.jpg');
  background-size: cover;
}
```

--------------------------------

### Create Reusable Avatar Component

Source: https://www.loremfaces.net/docs/nextjs.html

A flexible Avatar component supporting custom sizes, IDs, and random face selection.

```tsx
import Image from 'next/image'

type Size = 24 | 42 | 48 | 96 | 128 | 256
type FaceId = 1 | 2 | 3 | 4 | 5

interface AvatarProps {
  id?: FaceId
  size?: Size
  alt?: string
  random?: boolean
  priority?: boolean
  className?: string
}

export function Avatar({
  id = 1,
  size = 96,
  alt = 'User avatar',
  random = false,
  priority = false,
  className = '',
}: AvatarProps) {
  // random picks one of the 5 faces at render time
  const faceId = random ? 1 + Math.floor(Math.random() * 5) : id
  const src = `https://www.loremfaces.net/${size}/id/${faceId}.jpg`

  return (
    <Image
      src={src}
      alt={alt}
      width={size}
      height={size}
      priority={priority}
      className={`rounded-full ${className}`}
    />
  )
}

// Usage in App Router
import { Avatar } from '@/components/avatar'

export default function Page() {
  return (
    <div>
      <Avatar id={2} size={128} priority />
      <Avatar random size={48} />
    </div>
  )
}Copy
```

--------------------------------

### Create Reusable Avatar Component

Source: https://www.loremfaces.net/docs/svelte.html

A Svelte 5 component using $props and $derived for dynamic size, ID, and random face selection.

```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>
```

--------------------------------

### Add Accessible Alt Text

Source: https://www.loremfaces.net/docs

Include descriptive alt text for screen readers when using image tags.

```html
<img src="https://www.loremfaces.net/96/id/1.jpg"
     alt="Placeholder avatar for John Doe">
```

--------------------------------

### Create Reusable Avatar Component

Source: https://www.loremfaces.net/docs/vue.html

A flexible Vue 3 component supporting size, ID, and random face selection props.

```vue
<script setup lang="ts">
import { computed } from 'vue'

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

const props = withDefaults(defineProps<Props>(), {
  id: 1,
  size: 96,
  alt: 'User avatar',
  random: false,
})

// Random picks an ID once, so the face stays stable across re-renders
const randomId = 1 + Math.floor(Math.random() * 5)

const src = computed(() => {
  const faceId = props.random ? randomId : props.id
  return `https://www.loremfaces.net/${props.size}/id/${faceId}.jpg`
})
</script>

<template>
  <img
    :src="src"
    :alt="alt"
    :width="size"
    :height="size"
    loading="lazy"
    class="avatar"
  />
</template>

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

--------------------------------

### Create Reusable Avatar Component

Source: https://www.loremfaces.net/docs/angular.html

A standalone component for Angular 15+ that supports configurable sizes, IDs, and random face selection.

```typescript
import { Component, Input } from '@angular/core';

type Size = 24 | 42 | 48 | 96 | 128 | 256;
type FaceId = 1 | 2 | 3 | 4 | 5;

@Component({
  selector: 'app-avatar',
  standalone: true,
  template: `
    <img
      [src]="src"
      [alt]="alt"
      [width]="size"
      [height]="size"
      loading="lazy"
      style="border-radius: 50%; object-fit: cover"
    />
  `,
})
export class AvatarComponent {
  @Input() id: FaceId = 1;
  @Input() size: Size = 96;
  @Input() alt = 'User avatar';
  @Input() random = false;

  // Picked once per component instance, so the face stays stable
  private randomId = 1 + Math.floor(Math.random() * 5);

  get src(): string {
    const faceId = this.random ? this.randomId : this.id;
    return `https://www.loremfaces.net/${this.size}/id/${faceId}.jpg`;
  }
}
```

--------------------------------

### Reusable Avatar Component

Source: https://www.loremfaces.net/docs/react.html

A flexible component supporting size, ID, and random selection props. The random prop ensures the face remains stable across re-renders.

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

function Avatar({
  id = 1,
  size = 96,
  alt = "User avatar",
  className,
  random = false
}: AvatarProps) {
  // Random picks an ID once, so the face stays stable across re-renders
  const [randomId] = useState(() => 1 + Math.floor(Math.random() * 5));
  const src = `https://www.loremfaces.net/${size}/id/${random ? randomId : id}.jpg`;

  return (
    <img
      src={src}
      alt={alt}
      width={size}
      height={size}
      className={className}
      loading="lazy"
    />
  );
}

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

--------------------------------

### Custom Avatar Hook

Source: https://www.loremfaces.net/docs/react.html

A hook for programmatically generating avatar URLs, useful for lists or dynamic data.

```tsx
function useLoremFaces() {
  const getUrl = (
    size: 24 | 42 | 48 | 96 | 128 | 256,
    id?: 1 | 2 | 3 | 4 | 5
  ) => {
    // 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`;
  };

  return { getUrl };
}

// Usage
function UserList() {
  const { getUrl } = useLoremFaces();

  return (
    <div>
      {[1, 2, 3, 4, 5].map(id => (
        <img key={id} src={getUrl(48, id)} alt={`User ${id}`} />
      ))}
    </div>
  );
}
```

--------------------------------

### Avatar Stack Component

Source: https://www.loremfaces.net/docs/react.html

Displays a group of overlapping avatars, commonly used for team previews.

```jsx
function AvatarStack({
  count = 5,
  size = 48
}: { count?: number; size?: number }) {
  return (
    <div style={{ display: 'flex' }}>
      {Array.from({ length: Math.min(count, 5) }, (_, i) => (
        <img
          key={i}
          src={`https://www.loremfaces.net/${size}/id/${i + 1}.jpg`}
          alt={`Team member ${i + 1}`}
          width={size}
          height={size}
          style={{
            borderRadius: '50%',
            border: '2px solid white',
            marginLeft: i === 0 ? 0 : -12,
          }}
        />
      ))}
    </div>
  );
}

// Usage
<AvatarStack count={4} size={42} />
```
Tokens:
Raw