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

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: a calm agent gets a calm face. Use the same ground as the rest of the AI brand identity. The chat row is the smallest place that ground appears.

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.

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.

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.

Size the avatar for a circle crop

Ship a 512×512 PNG. web.dev's manifest guide 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. The chat face can bleed to the edges. A home screen icon often cannot.

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.

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.

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

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, not an animated logo that plays once and stops.

1. 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. 2

   Move only the ground

   One slow drift and return. Spins and flashing rims turn to noise at chat size.

3. 3

   Keep the loop short

   Five to ten seconds is enough. A Pro export can run from 5 to 30 seconds.

4. 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. 5

   Honour reduced motion

   If the visitor asked for less motion, show the still. Reduced motion is the pattern.

6. 6

   Fall back on purpose

   If the video will not play, the poster is the idle face, not a second icon.

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

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

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

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, then claim before you ship the 512 still and the loop. The code shows who holds the ground.