Avatars

Pictum integrations render generated avatars as native framework components. You can also use framework-independent helpers or direct image URLs, including realistic portraits.

See the output

Every preview is loaded from https://pictum.dev through a normal image URL.

Identicon

Gradient

Initials

Realistic (any)

Realistic portrait selected across all genders with the seed studio-atlas

Realistic (female)

Realistic (male)

Use your integration

Choose your framework to install its Pictum package and render a generated avatar. Each component forwards native image attributes, including alt, width, and height.

React
Vue
Laravel
Svelte
Astro

pnpm add @pictum/react

import { Avatar } from "@pictum/react";

export function ProfileAvatar() {
  return (
    <Avatar
      seed="ada-lovelace"
      variant="gradient"
      format="webp"
      alt="Ada Lovelace"
      width={48}
      height={48}
    />
  );
}

Continue with the React integration guide.

pnpm add @pictum/vue

<script setup lang="ts">
import { Avatar } from "@pictum/vue";
</script>

<template>
  <Avatar
    seed="ada-lovelace"
    variant="gradient"
    format="webp"
    alt="Ada Lovelace"
    width="48"
    height="48"
  />
</template>

Continue with the Vue integration guide.

composer require pictum/laravel

<x-avatar
  seed="ada-lovelace"
  variant="gradient"
  format="webp"
  alt="Ada Lovelace"
  width="48"
  height="48"
/>

Continue with the Laravel integration guide.

pnpm add @pictum/svelte

<script lang="ts">
import { Avatar } from "@pictum/svelte";
</script>

<Avatar
  seed="ada-lovelace"
  variant="gradient"
  format="webp"
  alt="Ada Lovelace"
  width="48"
  height="48"
/>

Continue with the Svelte integration guide.

pnpm add @pictum/astro

---
import { Avatar } from "@pictum/astro/components";
---

<Avatar
  seed="ada-lovelace"
  variant="gradient"
  format="webp"
  alt="Ada Lovelace"
  width="48"
  height="48"
/>

Continue with the Astro integration guide.

Standalone integrations

Use browser-native custom elements, framework-independent helpers, or direct image URLs.

HTTP
JavaScript
PHP
Web Components

<img
  src="https://pictum.dev/v1/avatars/gradient/ada-lovelace.webp"
  alt="Ada Lovelace"
  width="48"
  height="48"
/>

Review the HTTP API reference.

pnpm add @pictum/core

import { avatar } from "@pictum/core";

const url = avatar("ada-lovelace", {
  variant: "gradient",
  format: "webp",
}).url;

Continue with the JavaScript integration guide.

composer require pictum/php

$url = Pictum\avatar(
    'ada-lovelace',
    variant: 'gradient',
    format: 'webp',
)->url();

Continue with the PHP integration guide.

pnpm add @pictum/web

<script type="module">
  import { definePictumElements } from "@pictum/web";

  definePictumElements();
</script>

<pictum-avatar
  seed="ada-lovelace"
  variant="gradient"
  format="webp"
  alt="Ada Lovelace"
  width="48"
  height="48"
></pictum-avatar>

Continue with the Web Components integration guide.

Choose an avatar type

Generated avatars

Generated avatars are available through every integration component and helper. The same seed and variant always return the same design.

Variant	Result	Best for
`identicon`	Symmetric 5x5 pattern	Compact abstract identities
`gradient`	Seeded palette, direction, and glow	Colorful profile placeholders
`initials`	One or two characters from the seed	Recognizable names and labels

Realistic portraits

Realistic portraits are currently served through direct image URLs. Use them as a native image source in any framework or application.

<img
  src="https://pictum.dev/v1/avatars/realistic/customer-123.webp"
  alt="Customer profile"
/>

<img
  src="https://pictum.dev/v1/avatars/realistic/female/customer-123.webp"
  alt="Customer profile"
/>

<img
  src="https://pictum.dev/v1/avatars/realistic/male/customer-123.webp"
  alt="Customer profile"
/>

The API hashes each seed into the current portrait catalog without storing the seed. Catalog updates may remap existing seeds, and cached responses can continue showing the previous portrait until they expire.

Configure avatars

Choose a seed

Seeds accept 1-128 ASCII letters, numbers, and URL-safe separators. A seed must start and end with a letter or number.Use a stable opaque identifier that contains no sensitive information. Avatar URLs are public, cacheable, and may appear in logs or browser history.

Choose an image format

Format	Generated	Realistic	Use case
`svg`	Yes	No	Scalable generated avatars and inline markup
`jpg`	Yes	Yes	Compact opaque raster delivery
`png`	Yes	Yes	Broad raster compatibility
`webp`	Yes	Yes	Compact raster delivery

Generated raster avatars use a 256x256 source by default. Realistic avatars preserve their catalog source dimensions.

Getting started

Assets

Integrations

See the output

Identicon

Gradient

Initials

Realistic (any)

Realistic (female)

Realistic (male)

Use your integration

Standalone integrations

Choose an avatar type

Generated avatars

Realistic portraits

Configure avatars

Next steps

Explore integrations

Use the HTTP API

​See the output

Identicon

Gradient

Initials

Realistic (any)

Realistic (female)

Realistic (male)

​Use your integration

​Standalone integrations

​Choose an avatar type

​Generated avatars

​Realistic portraits

​Configure avatars

​Next steps

Explore integrations

Use the HTTP API

See the output

Use your integration

Standalone integrations

Choose an avatar type

Generated avatars

Realistic portraits

Configure avatars

Next steps