Pixel Art

Pixel Art 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/pixel-art/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 { pixelArt } from '@dicebear/collection';

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

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

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

dicebear pixelArt --seed "Felix"

flip

Type boolean

false

true

false

https://api.dicebear.com/9.x/pixel-art/svg?flip=false

createAvatar(pixelArt, {
  flip: false
});

dicebear pixelArt --flip false

rotate

Type integerMinimum 0Maximum 360

0

90

180

270

0

https://api.dicebear.com/9.x/pixel-art/svg?rotate=0

createAvatar(pixelArt, {
  rotate: 0
});

dicebear pixelArt --rotate 0

scale

Type integerMinimum 0Maximum 200

50

100

200

100

https://api.dicebear.com/9.x/pixel-art/svg?scale=50

createAvatar(pixelArt, {
  scale: 50
});

dicebear pixelArt --scale 50

radius

Type integerMinimum 0Maximum 50

0

10

20

30

40

50

0

https://api.dicebear.com/9.x/pixel-art/svg?radius=0

createAvatar(pixelArt, {
  radius: 0
});

dicebear pixelArt --radius 0

size

Type integerMinimum 1

32

48

64

80

96

https://api.dicebear.com/9.x/pixel-art/svg?size=32

createAvatar(pixelArt, {
  size: 32
});

dicebear pixelArt --size 32

backgroundColor

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

b6e3f4

c0aede

d1d4f9

ffd5dc

ffdfbf

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

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

dicebear pixelArt --backgroundColor "b6e3f4" "c0aede" "d1d4f9"

backgroundType

Type array

gradientLinear

solid

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

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

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

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

dicebear pixelArt --backgroundRotation 0 360

translateX

Type integerMinimum -100Maximum 100

-50

-25

0

25

50

0

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

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

dicebear pixelArt --translateX -50

translateY

Type integerMinimum -100Maximum 100

-50

-25

0

25

50

0

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

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

dicebear pixelArt --translateY -50

clip

Type boolean

true

https://api.dicebear.com/9.x/pixel-art/svg?clip=true

createAvatar(pixelArt, {
  clip: true
});

dicebear pixelArt --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/pixel-art/svg?randomizeIds=false

createAvatar(pixelArt, {
  randomizeIds: false
});

dicebear pixelArt --randomizeIds false

accessories

Type array

variant01

variant02

variant03

variant04

variant01

variant02

variant03

variant04

https://api.dicebear.com/9.x/pixel-art/svg?accessories=variant01,variant02,variant03

createAvatar(pixelArt, {
  accessories: ["variant01","variant02","variant03"]
});

dicebear pixelArt --accessories "variant01" "variant02" "variant03"

accessoriesColor

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

a9a9a9

d3d3d3

daa520

fafad2

ffd700

https://api.dicebear.com/9.x/pixel-art/svg?accessoriesColor=a9a9a9,d3d3d3,daa520

createAvatar(pixelArt, {
  accessoriesColor: ["a9a9a9","d3d3d3","daa520"]
});

dicebear pixelArt --accessoriesColor "a9a9a9" "d3d3d3" "daa520"

accessoriesProbability

Type integerMinimum 0Maximum 100

0

100

10

https://api.dicebear.com/9.x/pixel-art/svg?accessoriesProbability=0

createAvatar(pixelArt, {
  accessoriesProbability: 0
});

dicebear pixelArt --accessoriesProbability 0

beard

Type array

variant01

variant02

variant03

variant04

variant05

variant06

variant07

variant08

variant01

variant02

variant03

variant04

variant05

variant06

variant07

variant08

https://api.dicebear.com/9.x/pixel-art/svg?beard=variant01,variant02,variant03

createAvatar(pixelArt, {
  beard: ["variant01","variant02","variant03"]
});

dicebear pixelArt --beard "variant01" "variant02" "variant03"

beardProbability

Type integerMinimum 0Maximum 100

0

100

5

https://api.dicebear.com/9.x/pixel-art/svg?beardProbability=0

createAvatar(pixelArt, {
  beardProbability: 0
});

dicebear pixelArt --beardProbability 0

clothing

Type array

variant01

variant02

variant03

variant04

variant05

variant06

variant07

variant08

variant09

variant10

variant11

variant12

variant13

variant14

variant15

variant16

variant17

variant18

variant19

variant20

variant21

variant22

variant23

variant01

variant02

variant03

variant04

variant05

variant06

variant07

variant08

variant09

variant10

variant11

variant12

variant13

variant14

variant15

variant16

variant17

variant18

variant19

variant20

variant21

variant22

variant23

https://api.dicebear.com/9.x/pixel-art/svg?clothing=variant01,variant02,variant03

createAvatar(pixelArt, {
  clothing: ["variant01","variant02","variant03"]
});

dicebear pixelArt --clothing "variant01" "variant02" "variant03"

clothingColor

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

00b159

5bc0de

44c585

88d8b0

428bca

03396c

ae0001

d11141

ff6f69

ffc425

ffd969

ffeead

https://api.dicebear.com/9.x/pixel-art/svg?clothingColor=00b159,5bc0de,44c585

createAvatar(pixelArt, {
  clothingColor: ["00b159","5bc0de","44c585"]
});

dicebear pixelArt --clothingColor "00b159" "5bc0de" "44c585"

eyes

Type array

variant01

variant02

variant03

variant04

variant05

variant06

variant07

variant08

variant09

variant10

variant11

variant12

variant01

variant02

variant03

variant04

variant05

variant06

variant07

variant08

variant09

variant10

variant11

variant12

https://api.dicebear.com/9.x/pixel-art/svg?eyes=variant01,variant02,variant03

createAvatar(pixelArt, {
  eyes: ["variant01","variant02","variant03"]
});

dicebear pixelArt --eyes "variant01" "variant02" "variant03"

eyesColor

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

5b7c8b

647b90

697b94

76778b

588387

876658

https://api.dicebear.com/9.x/pixel-art/svg?eyesColor=5b7c8b,647b90,697b94

createAvatar(pixelArt, {
  eyesColor: ["5b7c8b","647b90","697b94"]
});

dicebear pixelArt --eyesColor "5b7c8b" "647b90" "697b94"

glasses

Type array

dark01

dark02

dark03

dark04

dark05

dark06

dark07

light01

light02

light03

light04

light05

light06

light07

dark01

dark02

dark03

dark04

dark05

dark06

dark07

light01

light02

light03

light04

light05

light06

light07

https://api.dicebear.com/9.x/pixel-art/svg?glasses=dark01,dark02,dark03

createAvatar(pixelArt, {
  glasses: ["dark01","dark02","dark03"]
});

dicebear pixelArt --glasses "dark01" "dark02" "dark03"

glassesColor

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

4b4b4b

5f705c

43677d

191919

323232

a04b5d

https://api.dicebear.com/9.x/pixel-art/svg?glassesColor=4b4b4b,5f705c,43677d

createAvatar(pixelArt, {
  glassesColor: ["4b4b4b","5f705c","43677d"]
});

dicebear pixelArt --glassesColor "4b4b4b" "5f705c" "43677d"

glassesProbability

Type integerMinimum 0Maximum 100

0

100

20

https://api.dicebear.com/9.x/pixel-art/svg?glassesProbability=0

createAvatar(pixelArt, {
  glassesProbability: 0
});

dicebear pixelArt --glassesProbability 0

hair

Type array

long01

long02

long03

long04

long05

long06

long07

long08

long09

long10

long11

long12

long13

long14

long15

long16

long17

long18

long19

long20

long21

short01

short02

short03

short04

short05

short06

short07

short08

short09

short10

short11

short12

short13

short14

short15

short16

short17

short18

short19

short20

short21

short22

short23

short24

long01

long02

long03

long04

long05

long06

long07

long08

long09

long10

long11

long12

long13

long14

long15

long16

long17

long18

long19

long20

long21

short01

short02

short03

short04

short05

short06

short07

short08

short09

short10

short11

short12

short13

short14

short15

short16

short17

short18

short19

short20

short21

short22

short23

short24

https://api.dicebear.com/9.x/pixel-art/svg?hair=long01,long02,long03

createAvatar(pixelArt, {
  hair: ["long01","long02","long03"]
});

dicebear pixelArt --hair "long01" "long02" "long03"

hairColor

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

009bbd

91cb15

603a14

611c17

28150a

83623b

603015

612616

a78961

bd1700

cab188

https://api.dicebear.com/9.x/pixel-art/svg?hairColor=009bbd,91cb15,603a14

createAvatar(pixelArt, {
  hairColor: ["009bbd","91cb15","603a14"]
});

dicebear pixelArt --hairColor "009bbd" "91cb15" "603a14"

hat

Type array

variant01

variant02

variant03

variant04

variant05

variant06

variant07

variant08

variant09

variant10

variant01

variant02

variant03

variant04

variant05

variant06

variant07

variant08

variant09

variant10

https://api.dicebear.com/9.x/pixel-art/svg?hat=variant01,variant02,variant03

createAvatar(pixelArt, {
  hat: ["variant01","variant02","variant03"]
});

dicebear pixelArt --hat "variant01" "variant02" "variant03"

hatColor

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

2e1e05

3d8a6b

614f8a

2663a3

989789

a62116

cc6192

https://api.dicebear.com/9.x/pixel-art/svg?hatColor=2e1e05,3d8a6b,614f8a

createAvatar(pixelArt, {
  hatColor: ["2e1e05","3d8a6b","614f8a"]
});

dicebear pixelArt --hatColor "2e1e05" "3d8a6b" "614f8a"

hatProbability

Type integerMinimum 0Maximum 100

0

100

5

https://api.dicebear.com/9.x/pixel-art/svg?hatProbability=0

createAvatar(pixelArt, {
  hatProbability: 0
});

dicebear pixelArt --hatProbability 0

mouth

Type array

happy01

happy02

happy03

happy04

happy05

happy06

happy07

happy08

happy09

happy10

happy11

happy12

happy13

sad01

sad02

sad03

sad04

sad05

sad06

sad07

sad08

sad09

sad10

happy01

happy02

happy03

happy04

happy05

happy06

happy07

happy08

happy09

happy10

happy11

happy12

happy13

sad01

sad02

sad03

sad04

sad05

sad06

sad07

sad08

sad09

sad10

https://api.dicebear.com/9.x/pixel-art/svg?mouth=happy01,happy02,happy03

createAvatar(pixelArt, {
  mouth: ["happy01","happy02","happy03"]
});

dicebear pixelArt --mouth "happy01" "happy02" "happy03"

mouthColor

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

c98276

d29985

de0f0d

e35d6a

https://api.dicebear.com/9.x/pixel-art/svg?mouthColor=c98276,d29985,de0f0d

createAvatar(pixelArt, {
  mouthColor: ["c98276","d29985","de0f0d"]
});

dicebear pixelArt --mouthColor "c98276" "d29985" "de0f0d"

skinColor

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

8d5524

a26d3d

b68655

cb9e6e

e0b687

eac393

f5cfa0

ffdbac

https://api.dicebear.com/9.x/pixel-art/svg?skinColor=8d5524,a26d3d,b68655

createAvatar(pixelArt, {
  skinColor: ["8d5524","a26d3d","b68655"]
});

dicebear pixelArt --skinColor "8d5524" "a26d3d" "b68655"

Details

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

Source
Title	Pixel Art
Creator	DiceBear
Website	https://www.dicebear.com
License	CC0 1.0
Source	https://www.figma.com/community/file/1198754108850888330

CDN sponsored by

Pixel Art ​

Usage ​

Options ​

seed

flip

rotate

scale

radius

size

backgroundColor

backgroundType

backgroundRotation

translateX

translateY

clip

randomizeIds

accessories

accessoriesColor

accessoriesProbability

beard

beardProbability

clothing

clothingColor

eyes

eyesColor

glasses

glassesColor

glassesProbability

hair

hairColor

hat

hatColor

hatProbability

mouth

mouthColor

skinColor

Details ​

Pixel Art

Usage

Options

Details