JGuang

Personas

Personas · DiceBear

Preview
npm install @dicebear/core@9.4.2 @dicebear/collection@9.4.2

Personas

Rounded personas for product, persona and user-research mockups.

Install

npm install @dicebear/core@9.4.2 @dicebear/collection@9.4.2

Generate an avatar

The same seed always produces the same avatar, so a user ID or username works as a seed. Avatars are generated locally without a network service.

import { createAvatar } from '@dicebear/core';
import { personas } from '@dicebear/collection';

// “Personas by Draftbit” by Draftbit - draftbit.com, CC BY 4.0 — credit the author where the avatar is used.
const avatar = createAvatar(personas, {
  seed: 'Aria Chen',
  size: 128,
  radius: 50,
});

export const svg = avatar.toString();     // inline SVG markup
export const dataUri = avatar.toDataUri(); // use as an <img> src

React component:

import { useMemo } from 'react';
import { createAvatar } from '@dicebear/core';
import { personas } from '@dicebear/collection';

export function UserAvatar({ seed, size = 64 }: { seed: string; size?: number }) {
  const src = useMemo(() => createAvatar(personas, { seed, size }).toDataUri(), [seed, size]);
  return <img src={src} width={size} height={size} alt={`Avatar for ${seed}`} />;
}

Options

Common options: seed, size, radius, backgroundColor, flip, rotate, scale.

Style options: body, clothingColor, eyes, facialHair, facialHairProbability, hair, hairColor, mouth, nose, skinColor.

Full option reference: https://www.dicebear.com/styles/personas/

License and attribution

  • Design: Personas by Draftbit — Draftbit - draftbit.com (https://personas.draftbit.com/)
  • License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
  • CC BY 4.0: credit the author and license, for example: “Personas by Draftbit” by Draftbit - draftbit.com, CC BY 4.0.
  • The DiceBear software is MIT. Its license does not cover the style artwork. Generated SVGs carry license metadata by default; keep it.