Toon Head

Toon Head is an illustrated vector avatar style featuring detailed character portraits with diverse skin tones, hairstyles, and expressive faces. Generate lifelike, customizable SVG profile icons in a modern animated-series aesthetic.

This avatar style is a remix of: ToonHead by Johan Melin, licensed under CC BY 4.0 .

LICENSE

While our code is MIT licensed, the design of this avatar style is licensed under CC BY 4.0. See details for more information.

Open in Playground

Usage

Use this URL to request this avatar style via our HTTP API.

https://api.dicebear.com/9.x/toon-head/svg

You can use the URL directly as image source.

See HTTP-API docs for more information.

First install the required packages via npm:

npm install @dicebear/core @dicebear/collection --save

Then you can create this avatar as follows:

import { createAvatar } from '@dicebear/core';
import { toonHead } from '@dicebear/collection';

const avatar = createAvatar(toonHead, {
  // ... options
});

const svg = avatar.toString();

See JS-Library docs for more information.

First install the CLI package via npm:

npm install --global dicebear

Then you can create this avatar as follows:

dicebear toonHead

See CLI docs for more information.

Options

seed

Type string

The seed determines the initial value for the built-in PRNG. With the PRNG you can create the same avatar over and over again based.

Felix

Aneka

https://api.dicebear.com/9.x/toon-head/svg?seed=Felix

createAvatar(toonHead, {
  seed: "Felix"
});

dicebear toonHead --seed "Felix"

flip

Type boolean

false

true

false

https://api.dicebear.com/9.x/toon-head/svg?flip=false

createAvatar(toonHead, {
  flip: false
});

dicebear toonHead --flip false

rotate

Type integerMinimum 0Maximum 360

0

90

180

270

0

https://api.dicebear.com/9.x/toon-head/svg?rotate=0

createAvatar(toonHead, {
  rotate: 0
});

dicebear toonHead --rotate 0

scale

Type integerMinimum 0Maximum 200

50

100

200

100

https://api.dicebear.com/9.x/toon-head/svg?scale=50

createAvatar(toonHead, {
  scale: 50
});

dicebear toonHead --scale 50

radius

Type integerMinimum 0Maximum 50

0

10

20

30

40

50

0

https://api.dicebear.com/9.x/toon-head/svg?radius=0

createAvatar(toonHead, {
  radius: 0
});

dicebear toonHead --radius 0

size

Type integerMinimum 1

32

48

64

80

96

https://api.dicebear.com/9.x/toon-head/svg?size=32

createAvatar(toonHead, {
  size: 32
});

dicebear toonHead --size 32

backgroundColor

Type arrayItem Pattern ^(transparent|[a-fA-F0-9]{6})$

b6e3f4

c0aede

d1d4f9

ffd5dc

ffdfbf

https://api.dicebear.com/9.x/toon-head/svg?backgroundColor=b6e3f4,c0aede,d1d4f9

createAvatar(toonHead, {
  backgroundColor: ["b6e3f4","c0aede","d1d4f9"]
});

dicebear toonHead --backgroundColor "b6e3f4" "c0aede" "d1d4f9"

backgroundType

Type array

gradientLinear

solid

https://api.dicebear.com/9.x/toon-head/svg?backgroundType=gradientLinear,solid

createAvatar(toonHead, {
  backgroundType: ["gradientLinear","solid"]
});

dicebear toonHead --backgroundType "gradientLinear" "solid"

backgroundRotation

Type array

Specify an array of two numbers for this option. The PRNG will generate a number between the two values, which will be used as the rotation degree. The rotation is only visible if backgroundType is set to ['gradientLinear'].

0

360

https://api.dicebear.com/9.x/toon-head/svg?backgroundRotation=0,360

createAvatar(toonHead, {
  backgroundRotation: [0,360]
});

dicebear toonHead --backgroundRotation 0 360

translateX

Type integerMinimum -100Maximum 100

-50

-25

0

25

50

0

https://api.dicebear.com/9.x/toon-head/svg?translateX=-50

createAvatar(toonHead, {
  translateX: -50
});

dicebear toonHead --translateX -50

translateY

Type integerMinimum -100Maximum 100

-50

-25

0

25

50

0

https://api.dicebear.com/9.x/toon-head/svg?translateY=-50

createAvatar(toonHead, {
  translateY: -50
});

dicebear toonHead --translateY -50

clip

Type boolean

true

https://api.dicebear.com/9.x/toon-head/svg?clip=true

createAvatar(toonHead, {
  clip: true
});

dicebear toonHead --clip true

randomizeIds

Type boolean

This option randomize the IDs in the generated SVG / XML. This can be useful for example if the avatars are included directly in the HTML and you want to avoid ID collisions.

false

https://api.dicebear.com/9.x/toon-head/svg?randomizeIds=false

createAvatar(toonHead, {
  randomizeIds: false
});

dicebear toonHead --randomizeIds false

beard

Type array

chin

chinMoustache

fullBeard

longBeard

moustacheTwirl

chin

chinMoustache

fullBeard

longBeard

moustacheTwirl

https://api.dicebear.com/9.x/toon-head/svg?beard=chin,chinMoustache,fullBeard

createAvatar(toonHead, {
  beard: ["chin","chinMoustache","fullBeard"]
});

dicebear toonHead --beard "chin" "chinMoustache" "fullBeard"

beardProbability

Type integerMinimum 0Maximum 100

0

100

50

https://api.dicebear.com/9.x/toon-head/svg?beardProbability=0

createAvatar(toonHead, {
  beardProbability: 0
});

dicebear toonHead --beardProbability 0

body

Type array

body

https://api.dicebear.com/9.x/toon-head/svg?body=body

createAvatar(toonHead, {
  body: ["body"]
});

dicebear toonHead --body "body"

clothes

Type array

dress

openJacket

shirt

tShirt

turtleNeck

dress

openJacket

shirt

tShirt

turtleNeck

https://api.dicebear.com/9.x/toon-head/svg?clothes=dress,openJacket,shirt

createAvatar(toonHead, {
  clothes: ["dress","openJacket","shirt"]
});

dicebear toonHead --clothes "dress" "openJacket" "shirt"

clothesColor

Type arrayItem Pattern ^(transparent|[a-fA-F0-9]{6})$

0b3286

147f3c

731ac3

151613

545454

b11f1f

e8e9e6

eab308

ec4899

f97316

https://api.dicebear.com/9.x/toon-head/svg?clothesColor=0b3286,147f3c,731ac3

createAvatar(toonHead, {
  clothesColor: ["0b3286","147f3c","731ac3"]
});

dicebear toonHead --clothesColor "0b3286" "147f3c" "731ac3"

eyebrows

Type array

angry

happy

neutral

raised

sad

angry

happy

neutral

raised

sad

https://api.dicebear.com/9.x/toon-head/svg?eyebrows=angry,happy,neutral

createAvatar(toonHead, {
  eyebrows: ["angry","happy","neutral"]
});

dicebear toonHead --eyebrows "angry" "happy" "neutral"

eyes

Type array

bow

happy

humble

wide

wink

bow

happy

humble

wide

wink

https://api.dicebear.com/9.x/toon-head/svg?eyes=bow,happy,humble

createAvatar(toonHead, {
  eyes: ["bow","happy","humble"]
});

dicebear toonHead --eyes "bow" "happy" "humble"

hair

Type array

bun

sideComed

spiky

undercut

bun

sideComed

spiky

undercut

https://api.dicebear.com/9.x/toon-head/svg?hair=bun,sideComed,spiky

createAvatar(toonHead, {
  hair: ["bun","sideComed","spiky"]
});

dicebear toonHead --hair "bun" "sideComed" "spiky"

hairColor

Type arrayItem Pattern ^(transparent|[a-fA-F0-9]{6})$

2c1b18

724133

a55728

b58143

d6b370

https://api.dicebear.com/9.x/toon-head/svg?hairColor=2c1b18,724133,a55728

createAvatar(toonHead, {
  hairColor: ["2c1b18","724133","a55728"]
});

dicebear toonHead --hairColor "2c1b18" "724133" "a55728"

hairProbability

Type integerMinimum 0Maximum 100

0

100

https://api.dicebear.com/9.x/toon-head/svg?hairProbability=0

createAvatar(toonHead, {
  hairProbability: 0
});

dicebear toonHead --hairProbability 0

head

Type array

head

https://api.dicebear.com/9.x/toon-head/svg?head=head

createAvatar(toonHead, {
  head: ["head"]
});

dicebear toonHead --head "head"

mouth

Type array

agape

angry

laugh

sad

smile

agape

angry

laugh

sad

smile

https://api.dicebear.com/9.x/toon-head/svg?mouth=agape,angry,laugh

createAvatar(toonHead, {
  mouth: ["agape","angry","laugh"]
});

dicebear toonHead --mouth "agape" "angry" "laugh"

rearHair

Type array

longStraight

longWavy

neckHigh

shoulderHigh

longStraight

longWavy

neckHigh

shoulderHigh

https://api.dicebear.com/9.x/toon-head/svg?rearHair=longStraight,longWavy,neckHigh

createAvatar(toonHead, {
  rearHair: ["longStraight","longWavy","neckHigh"]
});

dicebear toonHead --rearHair "longStraight" "longWavy" "neckHigh"

rearHairProbability

Type integerMinimum 0Maximum 100

0

100

50

https://api.dicebear.com/9.x/toon-head/svg?rearHairProbability=0

createAvatar(toonHead, {
  rearHairProbability: 0
});

dicebear toonHead --rearHairProbability 0

skinColor

Type arrayItem Pattern ^(transparent|[a-fA-F0-9]{6})$

5c3829

a36b4f

b98e6a

c68e7a

f1c3a5

https://api.dicebear.com/9.x/toon-head/svg?skinColor=5c3829,a36b4f,b98e6a

createAvatar(toonHead, {
  skinColor: ["5c3829","a36b4f","b98e6a"]
});

dicebear toonHead --skinColor "5c3829" "a36b4f" "b98e6a"

Details

Naming
Collection Import	import { toonHead } from '@dicebear/collection';
Package Import	import * as style from '@dicebear/toon-head';
CLI	dicebear toonHead
HTTP-API	https://api.dicebear.com/9.x/toon-head/svg
JSON Schema	https://api.dicebear.com/9.x/toon-head/schema.json

Source
Title	ToonHead
Creator	Johan Melin
Website	https://www.johanmelin.com
License	CC BY 4.0
Source	https://www.figma.com/community/file/1589627891082866389

CDN sponsored by

Toon Head ​

Usage ​

Options ​

seed

flip

rotate

scale

radius

size

backgroundColor

backgroundType

backgroundRotation

translateX

translateY

clip

randomizeIds

beard

beardProbability

body

clothes

clothesColor

eyebrows

eyes

hair

hairColor

hairProbability

head

mouth

rearHair

rearHairProbability

skinColor

Details ​

Toon Head

Usage

Options

Details