Avatars is a JavaScript library to dynamically generate Github-like, SVG based pixel-art avatars for both browser and node.js environment.
Install the Avatars with NPM.
## NPM
$ npm install @dicebear/avatars --save
Install a sprite collection of your choice.
## male
$ npm install @dicebear/avatars-male-sprites --save
## female
$ npm install @dicebear/avatars-female-sprites --save
## identicon
$ npm install @dicebear/avatars-identicon-sprites --save
## initials
$ npm install @dicebear/avatars-initials-sprites --save
## bottts
$ npm install @dicebear/avatars-bottts-sprites --save
## gridy
$ npm install @dicebear/avatars-gridy-sprites --save
## avataaars
$ npm install @dicebear/avatars-avataaars-sprites --save
## jdenticon
$ npm install @dicebear/avatars-jdenticon-sprites --save
Import Avatars and a sprite collection of your choice.
import Avatars from '@dicebear/avatars';
import SpriteCollection from '@dicebear/avatars-male-sprites';
let avatars = new Avatars(SpriteCollection);
let svg = avatars.create('custom-seed');
Generate an avatar.
let options = {};
let avatars = new Avatars(sprites(options));
let svg = avatars.create('custom-seed');
male-sprites & female-sprites options.
let options = {
mood: ['happy', 'sad', 'surprised']
};
identicon-sprites options.
let options = {
// Distance to the edge of the image
padding: 0,
// Background color
background: #FFF
};
bottts-sprites options.
let options = {
// Possible values: amber, blue, blueGrey, brown, cyan, deepOrange, deepPurple, agreenmber, grey, indigo, lightBlue, lightGreen, lime, orange, pink, purple, red, teal, yellow
colors: [],
// Possible values: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
primaryColorLevel: 600,
// Possible values: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
secondaryColorLevel: 400,
// in percent
colorful: 100,
mouthChance: 100,
sidesChance: 100,
textureChance: 50,
topChange: 100,
};
avataaars-sprites options.
let options = {
// transparent, circle
style: 'transparent'
// include or exclude passed options.
mode: 'include',
// Possible values: longHair, shortHair, eyepatch, hat, hijab, turban
top: [],
// in percent
topChance: 100,
// Possible values: black, blue, gray, heather, pastel, pink, red, white
hatColor: [],
// Possible values: auburn, black, blonde, brown, pastel, platinum, red, gray
hairColor: [],
// Possible values: kurt, prescription01, prescription02, round, sunglasses, wayfarers
accessories: [],
// in percent
accessoriesChance: 10,
// Possible values: medium, light, magestic, fancy, magnum
facialHair: null,
// in percent
facialHairChance: 10,
// Possible values: auburn, black, blonde, brown, platinum, red
facialHairColor: [],
// Possible values: blazer, sweater, shirt, hoodie, overall
clothes: [],
// Possible values: black, blue, gray, heather, pastel, pink, red, white
clothesColor: [],
// Possible values: close, cry, default, dizzy, roll, happy, hearts, side, squint, surprised, wink, winkWacky
eyes: [],
// Possible values: angry, default, flat, raised, sad, unibrow, up
eyebrow: [],
// Possible values: concerned, default, disbelief, eating, grimace, sad, scream, serious, smile, tongue, twinkle, vomit
mouth: [],
Possible values: tanned, yellow, pale, light, brown, darkBrown, black
skin: []
};
jdenticon-sprites options.
let options = {
// an array of numbers between 0 and 360
hue: [],
// Distance to the edge of the image
padding: 0,
// an array of numbers between 0 and 1
colorLightness: [],
// an array of numbers between 0 and 1
grayscaleLightness: [],
// an array of numbers between 0 and 1
colorSaturation: [],
// an array of numbers between 0 and 1
grayscaleSaturation: [],
// Any valid color identifier
background: null
};
gridy-sprites options.
let options = {
// Use different colors for eyes and mouth
colorful: false
};
initials-sprites options.
let options = {
// amber, blue, blueGrey, brown, cyan, deepOrange, deepPurple, agreenmber, grey, indigo, lightBlue, lightGreen, lime, orange, pink, purple, red, teal, yellow
backgroundColors: [],
// background color
// Possible values: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
backgroundColorLevel: 600,
// font size
// Number between 1 and 100
fontSize: 50,
// Number between 0 and 2
chars: 2,
// bold?
bold: false
};
v4.3.0 (11/07/2020)
v4.2.4/5 (07/23/2020)
v4.2.2/3 (07/22/2020)
v4.2.1 (06/21/2020)
v4.2.0 (05/26/2020)
v4.1.1 (05/14/2020)
v4.1.0 (05/09/2020)
04/09/2020
03/22/2020
03/06/2020
08/02/2019
06/25/2019
06/22/2019
05/22/2019
v2.0.4 (11/06/2018)
Author: DiceBear
Demo: https://avatars.dicebear.com/
Source Code: https://github.com/DiceBear/avatars
#javascript