@dicebear/avatars-bottts-sprites

Designed by Pablo Stanley, the Sketch library can be found on bottts.com.

Usage

HTTP-API (recommended)

Our free HTTP-API is the easiest way to use this sprite collection. Just use the following URL as image source.

https://avatars.dicebear.com/v2/bottts/:seed.svg

The value of :seed can be anything you like - but don't use any sensitive or personal data here!

Examples

preview	url
	https://avatars.dicebear.com/v2/bottts/example.svg
	https://avatars.dicebear.com/v2/bottts/example.svg?options[colors][]=cyan
	https://avatars.dicebear.com/v2/bottts/example.svg?options[colors][]=cyan&options[primaryColorLevel]=200

NPM

Install the Avatars and this sprite collection with the following command.

npm install --save @dicebear/avatars @dicebear/avatars-bottts-sprites

Now you are ready to create your first Avatar.

import Avatars from '@dicebear/avatars';
import sprites from '@dicebear/avatars-bottts-sprites';

let avatars = new Avatars(sprites());
let svg = avatars.create('custom-seed');

Options

name	type	default	description
radius	number	0	Avatar border radius
base64	bool	false	Return avatar as base64 data uri instead of XML Not supported by the HTTP API
width	number	null	Fixed width
height	number	null	Fixed height
margin	number	0	Avatar margin in percent HTTP-API limitation Max value 25
background	string	null	Any valid color identifier HTTP-API limitation Only hex (3-digit, 6-digit and 8-digit) values are allowed. Use url encoded hash: %23.
userAgent	string	window.navigator.userAgent	User-Agent for legacy browser fallback Automatically detected by the HTTP API
colors	array of strings	null	Possible values: amber, blue, blueGrey, brown, cyan, deepOrange, deepPurple, agreenmber, grey, indigo, lightBlue, lightGreen, lime, orange, pink, purple, red, teal, yellow
primaryColorLevel	number	600	Possible values: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
secondaryColorLevel	number	400	Possible values: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
colorful	boolean	100	Probability in percent
mouthChance	number	100	Probability in percent
sidesChance	number	100	Probability in percent
textureChance	number	50	Probability in percent
topChange	number	100	Probability in percent

Further information

You can find the DiceBear Avatars documentation at avatars.dicebear.com