Thumbs

Thumbs is a playful vector avatar style featuring stylized thumb characters with simple, expressive faces. Generate charming, customizable SVG profile icons with a fun, approachable aesthetic.

Thumbs by DiceBear, licensed under CC0 1.0 .

LICENSE

While our code is MIT licensed, the design of this avatar style is licensed under CC0 1.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/thumbs/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 { thumbs } from '@dicebear/collection';

const avatar = createAvatar(thumbs, {
  // ... 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 thumbs

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/thumbs/svg?seed=Felix

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

dicebear thumbs --seed "Felix"

flip

Type boolean

false

true

false

https://api.dicebear.com/9.x/thumbs/svg?flip=false

createAvatar(thumbs, {
  flip: false
});

dicebear thumbs --flip false

rotate

Type integerMinimum 0Maximum 360

0

90

180

270

0

https://api.dicebear.com/9.x/thumbs/svg?rotate=0

createAvatar(thumbs, {
  rotate: 0
});

dicebear thumbs --rotate 0

scale

Type integerMinimum 0Maximum 200

50

100

200

100

https://api.dicebear.com/9.x/thumbs/svg?scale=50

createAvatar(thumbs, {
  scale: 50
});

dicebear thumbs --scale 50

radius

Type integerMinimum 0Maximum 50

0

10

20

30

40

50

0

https://api.dicebear.com/9.x/thumbs/svg?radius=0

createAvatar(thumbs, {
  radius: 0
});

dicebear thumbs --radius 0

size

Type integerMinimum 1

32

48

64

80

96

https://api.dicebear.com/9.x/thumbs/svg?size=32

createAvatar(thumbs, {
  size: 32
});

dicebear thumbs --size 32

backgroundColor

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

b6e3f4

c0aede

d1d4f9

ffd5dc

ffdfbf

0a5b83

1c799f

69d2e7

f1f4dc

f88c49

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

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

dicebear thumbs --backgroundColor "b6e3f4" "c0aede" "d1d4f9"

backgroundType

Type array

gradientLinear

solid

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

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

dicebear thumbs --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/thumbs/svg?backgroundRotation=0,360

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

dicebear thumbs --backgroundRotation 0 360

translateX

Type integerMinimum -100Maximum 100

-50

-25

0

25

50

0

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

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

dicebear thumbs --translateX -50

translateY

Type integerMinimum -100Maximum 100

-50

-25

0

25

50

0

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

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

dicebear thumbs --translateY -50

clip

Type boolean

true

https://api.dicebear.com/9.x/thumbs/svg?clip=true

createAvatar(thumbs, {
  clip: true
});

dicebear thumbs --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/thumbs/svg?randomizeIds=false

createAvatar(thumbs, {
  randomizeIds: false
});

dicebear thumbs --randomizeIds false

eyes

Type array

variant1W10

variant1W12

variant1W14

variant1W16

variant2W10

variant2W12

variant2W14

variant2W16

variant3W10

variant3W12

variant3W14

variant3W16

variant4W10

variant4W12

variant4W14

variant4W16

variant5W10

variant5W12

variant5W14

variant5W16

variant6W10

variant6W12

variant6W14

variant6W16

variant7W10

variant7W12

variant7W14

variant7W16

variant8W10

variant8W12

variant8W14

variant8W16

variant9W10

variant9W12

variant9W14

variant9W16

variant1W10

variant1W12

variant1W14

variant1W16

variant2W10

variant2W12

variant2W14

variant2W16

variant3W10

variant3W12

variant3W14

variant3W16

variant4W10

variant4W12

variant4W14

variant4W16

variant5W10

variant5W12

variant5W14

variant5W16

variant6W10

variant6W12

variant6W14

variant6W16

variant7W10

variant7W12

variant7W14

variant7W16

variant8W10

variant8W12

variant8W14

variant8W16

variant9W10

variant9W12

variant9W14

variant9W16

https://api.dicebear.com/9.x/thumbs/svg?eyes=variant1W10,variant1W12,variant1W14

createAvatar(thumbs, {
  eyes: ["variant1W10","variant1W12","variant1W14"]
});

dicebear thumbs --eyes "variant1W10" "variant1W12" "variant1W14"

eyesColor

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

000000

ffffff

https://api.dicebear.com/9.x/thumbs/svg?eyesColor=000000,ffffff

createAvatar(thumbs, {
  eyesColor: ["000000","ffffff"]
});

dicebear thumbs --eyesColor "000000" "ffffff"

face

Type array

variant1

variant2

variant3

variant4

variant5

variant1

variant2

variant3

variant4

variant5

https://api.dicebear.com/9.x/thumbs/svg?face=variant1,variant2,variant3

createAvatar(thumbs, {
  face: ["variant1","variant2","variant3"]
});

dicebear thumbs --face "variant1" "variant2" "variant3"

faceOffsetX

Type arrayMax Items 2

Specify an array of two numbers for this option. The PRNG will generate a number between the two values, which will be used as offset.

-15

15

https://api.dicebear.com/9.x/thumbs/svg?faceOffsetX=-15,15

createAvatar(thumbs, {
  faceOffsetX: [-15,15]
});

dicebear thumbs --faceOffsetX -15 15

faceOffsetY

Type arrayMax Items 2

Specify an array of two numbers for this option. The PRNG will generate a number between the two values, which will be used as offset.

-15

15

https://api.dicebear.com/9.x/thumbs/svg?faceOffsetY=-15,15

createAvatar(thumbs, {
  faceOffsetY: [-15,15]
});

dicebear thumbs --faceOffsetY -15 15

faceRotation

Type arrayMax Items 2

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.

-20

20

https://api.dicebear.com/9.x/thumbs/svg?faceRotation=-20,20

createAvatar(thumbs, {
  faceRotation: [-20,20]
});

dicebear thumbs --faceRotation -20 20

mouth

Type array

variant1

variant2

variant3

variant4

variant5

variant1

variant2

variant3

variant4

variant5

https://api.dicebear.com/9.x/thumbs/svg?mouth=variant1,variant2,variant3

createAvatar(thumbs, {
  mouth: ["variant1","variant2","variant3"]
});

dicebear thumbs --mouth "variant1" "variant2" "variant3"

mouthColor

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

000000

ffffff

https://api.dicebear.com/9.x/thumbs/svg?mouthColor=000000,ffffff

createAvatar(thumbs, {
  mouthColor: ["000000","ffffff"]
});

dicebear thumbs --mouthColor "000000" "ffffff"

shape

Type array

default

https://api.dicebear.com/9.x/thumbs/svg?shape=default

createAvatar(thumbs, {
  shape: ["default"]
});

dicebear thumbs --shape "default"

shapeColor

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

0a5b83

1c799f

69d2e7

f1f4dc

f88c49

https://api.dicebear.com/9.x/thumbs/svg?shapeColor=0a5b83,1c799f,69d2e7

createAvatar(thumbs, {
  shapeColor: ["0a5b83","1c799f","69d2e7"]
});

dicebear thumbs --shapeColor "0a5b83" "1c799f" "69d2e7"

shapeOffsetX

Type arrayMax Items 2

Specify an array of two numbers for this option. The PRNG will generate a number between the two values, which will be used as offset.

-5

5

https://api.dicebear.com/9.x/thumbs/svg?shapeOffsetX=-5,5

createAvatar(thumbs, {
  shapeOffsetX: [-5,5]
});

dicebear thumbs --shapeOffsetX -5 5

shapeOffsetY

Type arrayMax Items 2

Specify an array of two numbers for this option. The PRNG will generate a number between the two values, which will be used as offset.

-5

5

https://api.dicebear.com/9.x/thumbs/svg?shapeOffsetY=-5,5

createAvatar(thumbs, {
  shapeOffsetY: [-5,5]
});

dicebear thumbs --shapeOffsetY -5 5

shapeRotation

Type arrayMax Items 2

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.

-20

20

https://api.dicebear.com/9.x/thumbs/svg?shapeRotation=-20,20

createAvatar(thumbs, {
  shapeRotation: [-20,20]
});

dicebear thumbs --shapeRotation -20 20

Details

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

Source
Title	Thumbs
Creator	DiceBear
Website	https://www.dicebear.com
License	CC0 1.0
Source	https://www.dicebear.com

CDN sponsored by

Thumbs ​

Usage ​

Options ​

seed

flip

rotate

scale

radius

size

backgroundColor

backgroundType

backgroundRotation

translateX

translateY

clip

randomizeIds

eyes

eyesColor

face

faceOffsetX

faceOffsetY

faceRotation

mouth

mouthColor

shape

shapeColor

shapeOffsetX

shapeOffsetY

shapeRotation

Details ​

Thumbs

Usage

Options

Details