DiceBear Files

This release is a big one, and it’s been in development for years. I’m sure I’ve overlooked a few things in this changelog, so please bear with me! 😅

My goal has always been to separate avatar styles more clearly from the code to prevent license confusion. At the same time, I've always wanted to define avatar styles using JSON so that they can be reused in any programming language. That is exactly what we are implementing with this release.

6 new avatar styles!

Before we get into the technical details, here's something to feast your eyes on. The following avatar styles are new:

Disco

Disco by DiceBear, licensed under CC0 1.0.

• https://www.dicebear.com/styles/disco/

Glyphs

This avatar style is a remix of: Abstract Avatars for All Creative Profile Use by Matt Houser, licensed under CC BY 4.0.

• https://www.dicebear.com/styles/glyphs/

Initial Face

Initial Face by DiceBear, licensed under CC0 1.0.

• https://www.dicebear.com/styles/initial-face/

Shape Grid

Shape Grid by DiceBear, licensed under CC0 1.0.

• https://www.dicebear.com/styles/shape-grid/

Stripes

Stripes by DiceBear, licensed under CC0 1.0.

• https://www.dicebear.com/styles/stripes/

Triangles

Triangles by DiceBear, licensed under CC0 1.0.

• https://www.dicebear.com/styles/triangles/

🧑‍🎨 Style Definitions

Each avatar style is now stored in a JSON file rather than as JavaScript code. This clearly separates the code, which is under the MIT license, from the license for the avatar style. Consequently, there is no need to reimplement an avatar style for DiceBear in other languages.

The definition schema is implemented as a JSON schema, which is described in more detail in the following documentation:

• https://www.dicebear.com/specification/definition-schema/
• https://github.com/dicebear/schema
• https://github.com/dicebear/styles

🧑‍💻 PHP Support

In addition to JavaScript, we now also support PHP! The output is identical to that of the JavaScript library when the same avatar style and options are used. We’re not stopping there, though - we have plans for further implementations in Python, Rust, Go and many more languages.

• https://www.dicebear.com/how-to-use/php-library/
• https://packagist.org/packages/dicebear/core
• https://packagist.org/packages/dicebear/styles

Example

:::php
<?php

use Composer\InstalledVersions;
use DiceBear\Style;
use DiceBear\Avatar;

$basePath = InstalledVersions::getInstallPath('dicebear/styles');
$definition = json_decode(file_get_contents($basePath . '/src/adventurer-neutral.json'), true);

$style = new Style($definition);
$avatar = new Avatar($style, [
    'seed' => 'Felix'
]);

$svg = (string) $avatar;

🛝 Better Playground

The playground has also been completely redesigned. You can now:

1. Adjust any available option in the selected avatar style directly in the Playground.
2. Upload your own avatar styles to the Playground.
3. Download multiple avatars in a single batch.

4. A counter shows how many combinations are possible with the selected avatar style and options.

5. https://www.dicebear.com/playground/

📖 Better Documentation

The documentation has been reorganized. In particular, the avatar style documentation is now much clearer and displays all component variants and colors with a better preview than before.

• https://www.dicebear.com/introduction/
• https://www.dicebear.com/styles/

💻 Updated CLI

You can now use your own avatar styles with the CLI.

:::bash
dicebear ./path/to/your/avatar-style.json --seed test --format svg

🆕 Updated JavaScript API

All individual avatar style packages (e.g. @dicebear/initials, @dicebear/adventurer, etc.) and the @dicebear/collection package have been removed.

Avatar styles are now distributed as JSON definition files via the separate dicebear/styles repository and installed through the @dicebear/styles package. The format follows the new DiceBear Avatar Style JSON Schema.

Before:

:::bash
npm install @dicebear/core @dicebear/initials

:::js
import { createAvatar } from '@dicebear/core';
import { initials } from '@dicebear/initials';

const avatar = createAvatar(initials, { seed: 'Jane' });

After:

:::bash
npm install @dicebear/core @dicebear/styles

:::js
import { createAvatar } from '@dicebear/core';
import initials from '@dicebear/styles/initials.json' with { type: 'json' };

const avatar = createAvatar(initials, { seed: 'Jane' });

🧐 Integrated Validation

Built-in validation is now available for avatar styles and options. You will now be notified right away if you use them incorrectly.

• https://github.com/dicebear/schema

⚖️ Weighted Variants Support

You can now assign weights to component variants. For instance, you can make certain components, such as a particular hat, appear either rarely or frequently. The choice is yours.

• https://www.dicebear.com/how-to-use/js-library/#dynamic-component-options

🌈 Gradient support

You can now set any color as a gradient. This gives you even more scope for creativity and allows you to achieve vibrant, bold results.

👀 Changed options

The option values may have changed. For the most accurate information, check the avatar styles documentation directly or use the Playground.

Now, component variants are always suffixed with Variant.

Before:

:::json
{
    "eyes": ["blink"]
}

Now:

:::json
{
    "eyesVariant": ["blink"]
}

🛠️ New tools

There are two new tools available on the website:

WCAG Contrast Picker

See which of two contrast colors DiceBear picks for any color - using the exact WCAG 2.1 algorithm from @dicebear/core.

• https://www.dicebear.com/tools/contrast/

Bundle Size Estimator

Pick the styles you plan to use and see how many gzipped kilobytes they'll add to your JavaScript bundle.

• https://www.dicebear.com/tools/bundle-size/

☑️ Updated API, Exporter Plugin for Figma

Of course, these tools have also been updated so you can get started right away with version 10.