Shapes

Shapes is an abstract vector avatar style composed of layered geometric forms. Generate minimal, distinctive customizable SVG profile icons — ideal as avatar placeholders or abstract user identifiers.

Shapes 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/shapes/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 { shapes } from '@dicebear/collection';

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

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

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

dicebear shapes --seed "Felix"

flip

Type boolean

false

true

false

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

createAvatar(shapes, {
  flip: false
});

dicebear shapes --flip false

rotate

Type integerMinimum 0Maximum 360

0

90

180

270

0

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

createAvatar(shapes, {
  rotate: 0
});

dicebear shapes --rotate 0

scale

Type integerMinimum 0Maximum 200

50

100

200

100

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

createAvatar(shapes, {
  scale: 50
});

dicebear shapes --scale 50

radius

Type integerMinimum 0Maximum 50

0

10

20

30

40

50

0

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

createAvatar(shapes, {
  radius: 0
});

dicebear shapes --radius 0

size

Type integerMinimum 1

32

48

64

80

96

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

createAvatar(shapes, {
  size: 32
});

dicebear shapes --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/shapes/svg?backgroundColor=b6e3f4,c0aede,d1d4f9

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

dicebear shapes --backgroundColor "b6e3f4" "c0aede" "d1d4f9"

backgroundType

Type array

gradientLinear

solid

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

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

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

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

dicebear shapes --backgroundRotation 0 360

translateX

Type integerMinimum -100Maximum 100

-50

-25

0

25

50

0

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

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

dicebear shapes --translateX -50

translateY

Type integerMinimum -100Maximum 100

-50

-25

0

25

50

0

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

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

dicebear shapes --translateY -50

clip

Type boolean

true

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

createAvatar(shapes, {
  clip: true
});

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

createAvatar(shapes, {
  randomizeIds: false
});

dicebear shapes --randomizeIds false

shape1

Type array

ellipse

ellipseFilled

line

polygon

polygonFilled

rectangle

rectangleFilled

ellipseFilled

polygonFilled

rectangleFilled

https://api.dicebear.com/9.x/shapes/svg?shape1=ellipse,ellipseFilled,line

createAvatar(shapes, {
  shape1: ["ellipse","ellipseFilled","line"]
});

dicebear shapes --shape1 "ellipse" "ellipseFilled" "line"

shape1Color

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

0a5b83

1c799f

69d2e7

f1f4dc

f88c49

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

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

dicebear shapes --shape1Color "0a5b83" "1c799f" "69d2e7"

shape1OffsetX

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.

-65

65

https://api.dicebear.com/9.x/shapes/svg?shape1OffsetX=-65,65

createAvatar(shapes, {
  shape1OffsetX: [-65,65]
});

dicebear shapes --shape1OffsetX -65 65

shape1OffsetY

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.

-45

45

https://api.dicebear.com/9.x/shapes/svg?shape1OffsetY=-45,45

createAvatar(shapes, {
  shape1OffsetY: [-45,45]
});

dicebear shapes --shape1OffsetY -45 45

shape1Rotation

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.

-160

160

https://api.dicebear.com/9.x/shapes/svg?shape1Rotation=-160,160

createAvatar(shapes, {
  shape1Rotation: [-160,160]
});

dicebear shapes --shape1Rotation -160 160

shape2

Type array

ellipse

ellipseFilled

line

polygon

polygonFilled

rectangle

rectangleFilled

ellipseFilled

line

polygonFilled

rectangleFilled

https://api.dicebear.com/9.x/shapes/svg?shape2=ellipse,ellipseFilled,line

createAvatar(shapes, {
  shape2: ["ellipse","ellipseFilled","line"]
});

dicebear shapes --shape2 "ellipse" "ellipseFilled" "line"

shape2Color

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

0a5b83

1c799f

69d2e7

f1f4dc

f88c49

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

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

dicebear shapes --shape2Color "0a5b83" "1c799f" "69d2e7"

shape2OffsetX

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.

-40

40

https://api.dicebear.com/9.x/shapes/svg?shape2OffsetX=-40,40

createAvatar(shapes, {
  shape2OffsetX: [-40,40]
});

dicebear shapes --shape2OffsetX -40 40

shape2OffsetY

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.

-40

40

https://api.dicebear.com/9.x/shapes/svg?shape2OffsetY=-40,40

createAvatar(shapes, {
  shape2OffsetY: [-40,40]
});

dicebear shapes --shape2OffsetY -40 40

shape2Rotation

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.

-180

180

https://api.dicebear.com/9.x/shapes/svg?shape2Rotation=-180,180

createAvatar(shapes, {
  shape2Rotation: [-180,180]
});

dicebear shapes --shape2Rotation -180 180

shape3

Type array

ellipse

ellipseFilled

line

polygon

polygonFilled

rectangle

rectangleFilled

ellipse

ellipseFilled

line

polygon

polygonFilled

rectangle

rectangleFilled

https://api.dicebear.com/9.x/shapes/svg?shape3=ellipse,ellipseFilled,line

createAvatar(shapes, {
  shape3: ["ellipse","ellipseFilled","line"]
});

dicebear shapes --shape3 "ellipse" "ellipseFilled" "line"

shape3Color

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

0a5b83

1c799f

69d2e7

f1f4dc

f88c49

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

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

dicebear shapes --shape3Color "0a5b83" "1c799f" "69d2e7"

shape3OffsetX

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.

-25

25

https://api.dicebear.com/9.x/shapes/svg?shape3OffsetX=-25,25

createAvatar(shapes, {
  shape3OffsetX: [-25,25]
});

dicebear shapes --shape3OffsetX -25 25

shape3OffsetY

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.

-25

25

https://api.dicebear.com/9.x/shapes/svg?shape3OffsetY=-25,25

createAvatar(shapes, {
  shape3OffsetY: [-25,25]
});

dicebear shapes --shape3OffsetY -25 25

shape3Rotation

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.

-180

180

https://api.dicebear.com/9.x/shapes/svg?shape3Rotation=-180,180

createAvatar(shapes, {
  shape3Rotation: [-180,180]
});

dicebear shapes --shape3Rotation -180 180

Details

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

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

CDN sponsored by

Shapes ​

Usage ​

Options ​

seed

flip

rotate

scale

radius

size

backgroundColor

backgroundType

backgroundRotation

translateX

translateY

clip

randomizeIds

shape1

shape1Color

shape1OffsetX

shape1OffsetY

shape1Rotation

shape2

shape2Color

shape2OffsetX

shape2OffsetY

shape2Rotation

shape3

shape3Color

shape3OffsetX

shape3OffsetY

shape3Rotation

Details ​

Shapes

Usage

Options

Details