Skip to content
DOL Studio

KidAvatar

Design: Stable Code: Coded KID identityuser 21 Figma sets 4 standalone User card/General

Live preview

Sizes

6 sizes — xs / sm / md / lg / xl / 2xl. Soft variant exemplar; same scale applies to solid + image variants.
A
A
A
A
A
A

Soft variant — 13 tones

Light-tinted background + bold initials. KID palette extends beyond standard 6 (slate/blue/red/amber/green/pink/purple/violet/cyan/teal/orange/magenta/dark).
A
A
A
A
A
A
A
A
A
A
A
A
A

Solid variant — 13 tones

Saturated fill + white initials. Use for high-contrast contexts (dark headers, hero placements).
A
A
A
A
A
A
A
A
A
A
A
A
A

Image + silhouette fallback

`src` renders an image. No `name` and no `src` → silhouette icon placeholder.
Bin avatar
JD

Import & files

Import
import { KidAvatar } from "@dol/ui/kid";
Source file
packages/@dol/ui/src/kid/KidAvatar.tsx

Figma source

Figma source 21 sets
Page
Avatar, User
Sets
21 + 4 standalone
Primary set
User card/General · 31 variants Open in Figma →
Showing: User card/General
11 other sets (+ 9 more not listed)
  • Avatar/Multi avatar display 96 variants Figma →
  • Badge item/Dạy thay status 3 variants Figma →
  • Badge item/Leaderboard 140 variants Figma →
  • Badge item/Myself, me, self, your class 3 variants Figma →
  • Img lib/Avatar/3D Avatar 56 variants Figma →
  • Img lib/Avatar/3D cartoon Job 56 variants Figma →
  • Img lib/Avatar/3D chibi animal 56 variants Figma →
  • Img lib/Avatar/Cartoon animal 1 variants Figma →
  • Img lib/Avatar/Character Exercise 9 variants Figma →
  • Img lib/Avatar/Cinematic Portrait 46 variants Figma →
  • Img lib/Avatar/DOL Junior Character 41 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# KidAvatar
Slug: `avatar-user`
Domain: kid · Category: display
Design: stable · Code: coded


## Description
User avatar primitives - 21 sets across edit button, multi-avatar display, status badges (e.g., "Dạy thay" assignment indicators).


## Import
```ts
import { KidAvatar } from "@dol/ui/kid";
```
Source: `packages/@dol/ui/src/kid/KidAvatar.tsx`


## Figma source
Page: Avatar, User
Sets: 21
Primary: User card/General
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=8031-86799

Related

  • Avatar, User

    Coded
  • 3

    KidBadge

    KIDCoded
  • ✓ Hoàn thành

    KidStatusTag

    KIDCode only
  • DOL English logo

    Logo

    Coded
  • DOL Academy logo

    Program logo

    Design only

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).