# AI agent avatar: give your assistant a face that is not a robot

[Canonical HTML page](https://gradiently.design/guide/ai-agent-avatar)

The face beside each reply is how people recognise your assistant. Design a square that survives a circle crop, then add a slow loop for the thinking state.

## The short version

- An AI agent avatar is the small face beside an assistant's messages, and it should identify your product rather than look like a stock robot.
- Design a full-bleed square, keep the recognisable part inside a centre circle whose radius is 40% of the width, and ship a 512×512 PNG.
- A radial gradient in your own colours still reads at chat size. A generic violet orb is the face people have already learned to skip.
- Show a still while the agent is idle, and a seamless loop of 5 to 30 seconds while it thinks. If a visitor prefers reduced motion, keep the still.
- A public Mark code such as GR·K7Q2·MX records exactly one owner of that ground. Claim it before you launch if you want to keep producing the face.

An **AI agent avatar** is the small face beside your assistant's replies. Make it a face you could not swap for a stock robot: one colour, a centred letter, and a quiet change while it is thinking.

## What an AI agent avatar has to do

It has to name the speaker, stay clear at tab-icon size, and show when the agent is working. A robot, a headset or a shared purple sphere does none of that. At that size the costume is mud, and it could be any product.

Match it to [brand personality](https://gradiently.design/guide/brand-personality): a calm agent gets a calm face. Use the same ground as the rest of the [AI brand identity](https://gradiently.design/guide/ai-brand-identity). The chat row is the smallest place that ground appears.

### Avoid

- A stock robot, headset or sparkle character
- A photo of a person, unless a person really replies
- A long name, a tagline or thin line art
- The same violet orb every demo uses
- A box, a shadow or a bright ring behind the letter
- Transparent corners, or a circle baked into the file

### Do

- One colour signature that is the face
- A single letter, or no letter at all
- That mark kept inside the centre circle
- Colours you still know with the letter covered
- Type set straight on the ground, light or dark
- A full-bleed square, and let the chat crop the circle

## Three faces that are not a robot

Pick one idea and repeat it. These squares are 1080×1080, a playlist-cover size, so you can judge the crop before exporting the chat file.

### A single letter

A monogram is the safest chat face: one heavy letter, centred, clear on the light and the dark of the ground. Cover the letter. If the square could be anyone's, the colour is not finished. A busy thread shows about 32 pixels, the same test as a [favicon](https://gradiently.design/guide/favicon-design).

Square idle avatar with the letter N centred on a gradient

Idle face for a fictional assistant, North. One centred letter on a full-bleed square: the message-list file.

Gradiently's auto ink sets that letter to light or dark from the ground's palette. If it sinks into the brightest patch, deepen the patch. Do not add a shadow.

### A name only when the circle is large

A full word belongs on a profile or an empty state, where the circle is big enough to read. It does not belong in the message list.

Square profile avatar with the word North centred on a gradient

North, the name, only where the circle is large. Keep this version off the message list.

### The same face, thinking

Thinking is the same letter in the same place. The ground moves and the type stays still. A second icon with blinking dots teaches people two faces.

Square thinking-state avatar with the letter N held in the centre

The thinking still. The letter stays fixed, the ground travels, and a paused frame matches the idle file.

## Size the avatar for a circle crop

Ship a 512×512 PNG. [web.dev's manifest guide](https://web.dev/learn/pwa/web-app-manifest) says that a single icon should be 512 by 512, and that maskable icons start there. The safe zone is a centre circle with a radius of 40% of the width. Put the letter inside it. Corners may be cropped to a circle, a square or a rounded square.

Design at 1080×1080 so the circle stays sharp. Add 192×192 for a small manifest icon, and 1024×1024 only for an app icon, which uses different padding: see [app icon size](https://gradiently.design/guide/app-icon-size). The chat face can bleed to the edges. A home screen icon often cannot.

- Chat face 512×512: 512 × 512
- Small icon 192×192: 192 × 192
- Design file 1080×1080: 1080 × 1080
- App icon 1024×1024: 1024 × 1024

One picture, four files. The message list uses 512×512. Keep 1024×1024 only for an app icon.

> **Fill the square, then test the circle** A transparent corner becomes a pale ring after the circle crop. Check 32 and 64 pixels, on white and on near-black. If the colour alone is not the brand, simplify.

In the Studio, work at 1080×1080 and export one extra size at 512×512. One new size is free. A free still is PNG or JPG up to 720p with a small watermark, so ship the Pro file: at chat size the watermark is the face.

## Radial colour, not a costume

There is no room for a scene. A radial gradient has a light side, a body and an edge, so the disc still reads as an object. Put the light near 40% across and 35% down, and end on a deep colour from the same family. That disc is the whole face, not a ring behind a word.

- Ember: `radial-gradient(circle at 40% 35%, #fff7ed 0%, #fdba74 18%, #c2410c 46%, #431407 80%)`
- Tide: `radial-gradient(circle at 40% 35%, #ecfeff 0%, #67e8f9 16%, #0e7490 44%, #083344 78%)`
- Borrowed violet: `radial-gradient(circle at 40% 35%, #fdf4ff 0%, #e9d5ff 16%, #7c3aed 44%, #2e1065 78%)`
- Citrine on pine: `radial-gradient(circle at 40% 35%, #fefce8 0%, #fde047 14%, #0f766e 42%, #042f2e 76%)`

Four faces to paste. Skip borrowed violet unless it is yours. More shapes: [gradient orbs](https://gradiently.design/guide/gradient-orb) and [radial gradients](https://gradiently.design/guide/css-radial-gradient).

Two products with the same orb are the same product in a thread. Tint the highlight with the body colour so the centre stays whole, and keep the rim dark so the crop has an edge.

```css
.agent {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff7ed 0%, #fdba74 18%, #c2410c 46%, #431407 80%);
}

```

A colour-only face at chat-row size. Change 40px to your layout.

## Show the thinking state with a loop

Idle is a still. Thinking is that square in motion, slow, and joined so the end meets the start. Use a [seamless loop](https://gradiently.design/guide/seamless-loop-video), not an [animated logo](https://gradiently.design/guide/animated-logo) that plays once and stops.

1. **Lock the still first** Keep the letter where the idle PNG put it. The loop must not move it or change the crop.
2. **Move only the ground** One slow drift and return. Spins and flashing rims turn to noise at chat size.
3. **Keep the loop short** Five to ten seconds is enough. A Pro export can run from 5 to 30 seconds.
4. **Export MP4 or WebM** Pro video is MP4 or WebM at 30 fps, in 1080p, 2K or 4K. Crop a wider frame in CSS.
5. **Honour reduced motion** If the visitor asked for less motion, show the still. [Reduced motion](https://gradiently.design/guide/reduced-motion) is the pattern.
6. **Fall back on purpose** If the video will not play, the poster is the idle face, not a second icon.

| State | What people see | File |
| --- | --- | --- |
| Idle | The still square, cropped to a circle | PNG, 512×512 |
| Thinking | Same letter, ground moving | MP4 or WebM, 5 to 30 seconds |
| Reduced motion | The idle still, even while working | PNG, video paused |
| Image missing | A letter or a flat radial disc | The CSS fallback |

Four states, one face. The loop says this assistant is working. It does not invent a second one.

```html
<div class="agent" data-state="idle">
  <img src="/north.png" width="512" height="512" alt="North">
  <video src="/north-loop.webm" poster="/north.png" muted loop playsinline></video>
</div>

```

The still is the default. The video stays silent until thinking starts. alt is the agent's name.

```css
.agent {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #431407;
}
.agent img,
.agent video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.agent video { display: none; }
.agent[data-state="thinking"] img { display: none; }
.agent[data-state="thinking"] video { display: block; }

@media (prefers-reduced-motion: reduce) {
  .agent[data-state="thinking"] img { display: block; }
  .agent[data-state="thinking"] video { display: none; }
}

```

object-fit: cover keeps the centre inside the circle. MDN documents [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).

```js
const agent = document.querySelector(".agent");
const video = agent.querySelector("video");
const reduce = matchMedia("(prefers-reduced-motion: reduce)");

function setThinking(on) {
  agent.dataset.state = on ? "thinking" : "idle";
  if (on && !reduce.matches) {
    video.play().catch(() => {});
  } else {
    video.pause();
    video.currentTime = 0;
  }
}

reduce.addEventListener("change", () => {
  if (reduce.matches) {
    video.pause();
    video.currentTime = 0;
  }
});

```

Call setThinking(true) from the send action, so play() has a gesture. If it is refused, the poster stays.

## Give the face one owner

A PNG can be copied. The ground should have one owner. On Gradiently a Mark has a public code such as GR·K7Q2·MX and exactly one owner. Claim it and your name is on the record, with a certificate anyone can check. It is not a trademark and not a blockchain entry.

You can design with any unclaimed Mark. Exporting needs it to be yours, and a claim leaves that work to you and the people you assign. Claiming is a one-time payment. The first year of keeping is included; after that, keeping is free with Pro or a yearly fee without it. An unpaid year, after a grace period, returns the Mark to the Market. Exports you already have stay yours.

[Preview the crops on your own name](/try), then claim before you ship the 512 still and the loop. The code shows who holds the ground.

## FAQ

### What size should an AI agent avatar be?

A 512×512 PNG. That is the single icon size to ship, and the floor for a maskable icon. Design at 1080×1080, with the letter inside a centre circle whose radius is 40% of the width.

### Should a chatbot avatar be a robot or a person's photo?

No, unless a real person replies. A robot is a shared costume, and a portrait implies a human. A letter or your own colour field still reads at chat size.

### How do I show that the agent is thinking?

Play a seamless loop of 5 to 30 seconds: the letter stays, the ground moves, and object-fit: cover crops the circle. If the visitor prefers reduced motion, keep the still.

### Can an AI orb avatar be only a radial gradient?

Yes. An off-centre light and a deep edge read as one object at 32 pixels. Use your colours. The generic violet orb is the one people already skip.

### What stops another product using the same face?

A saved PNG can be kept. A Mark has one owner at a time, under a public code such as GR·K7Q2·MX, so another product cannot claim that ground while you hold it. Claim before launch. The record is not a trademark.