Avatar Playground for Developers

Generate consistent avatars from any name. One package, three providers, zero config.

npm install mugbear

Implementation Code

Ready to paste into your project

// Install: npm install mugbear
// Or use the API directly:

interface AvatarProps {
  name: string;
  size?: number;
  style?: 'initials' | 'avataaars' | 'notionists' | 'thumbs';
}

export function Avatar({ name, size = 64, style = 'initials' }: AvatarProps) {
  const url = `https://api.dicebear.com/7.x/${style}/svg?seed=${encodeURIComponent(name)}`;
  
  return (
    <img
      src={url}
      alt={`Avatar for ${name}`}
      width={size}
      height={size}
      style={{ borderRadius: '50%' }}
    />
  );
}

// Usage:
// <Avatar name="John Doe" size={64} style="initials" />

Full API Reference

Everything you need to implement MugBear

Core

getAvatar()

Pass any name and provider, get a URL back.

getAvatar('John', { 
  provider: 'dicebear', 
  style: 'initials' 
})

React

React Component

Drop-in component with built-in fallback.

<MugBearAvatar 
  name="John"
  provider="dicebear"
  style="avataaars"
  size={64}
/>

Utility

getAllAvatars()

Get URLs from all providers at once.

const avatars = getAllAvatars('John')
// Returns:
// { initials, cartoon, robot, 
//   pixel, notionists, thumbs, 
//   uiAvatars }

// package

Use as npm Package

npm install mugbear

import { getAvatar } from 'mugbear'

// DiceBear
const url = getAvatar('John Doe', { 
  provider: 'dicebear', 
  style: 'initials' 
})

// RoboHash
const url = getAvatar('John Doe', { 
  provider: 'robohash'
})

// UI Avatars  
const url = getAvatar('John Doe', { 
  provider: 'ui-avatars',
  rounded: true
})