Angular Avatar Component

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

Basic Usage

The fastest way to display an avatar in Angular: point an <img> at a LoremFaces URL in any template. No install, no config:

<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 standalone component with inputs for size, ID, and a random face (Angular 15+):

avatar.component.ts

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

Usage

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

Avatar URL Service

An injectable service for generating avatar URLs anywhere in your app:

avatar.service.ts

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

Avatar Stack

Display overlapping avatars for team previews with the built-in @for control flow (Angular 17+):

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

Angular 16 and earlier: Use *ngFor="let id of [1, 2, 3, 4, 5]; let index = index" instead of the @for block.

With NgOptimizedImage

Angular's NgOptimizedImage directive works with LoremFaces URLs for lazy loading and priority hints:

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 {}

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: