Gradient Avatar Generator

Enter a username to generate an avatar

Featured Examples

Avatar for AnishAnish
Avatar for vercelvercel
Avatar for nextnext
Avatar for reactreact
Avatar for typescripttypescript
Avatar for edgeedge
Avatar for satorisatori
Avatar for usernameusername
Avatar for random1random1
Avatar for random2random2
Avatar for random3random3
Avatar for githubgithub

Usage Guide

Basic Usage

Get started with a simple username:

https://xvatar.vercel.app/api/avatar/xeven777
Basic avatar
With Initials

Add text to your avatar:

https://xvatar.vercel.app/api/avatar/username.svg?text=GR
Avatar with initials
Custom Shape

Change the roundness:

https://xvatar.vercel.app/api/avatar/newusername?rounded=20
Square avatar
Custom Size

Change the dimensions:

https://xvatar.vercel.app/api/avatar/username?size=200
Larger avatar
User Logo

Add a user icon:

https://xvatar.vercel.app/api/avatar/diddy?userLogo=true
Avatar with user logo
User Logo

Add a user icon:

https://xvatar.vercel.app/api/avatar/coolest.svg?userLogo=true
Avatar with user logo

Using the Sdk

Installation
npm install xvatar-sdkyarn add xvatar-sdkpnpm add xvatar-sdk
Basic Usage
import { generateAvatar } from "xvatar-sdk";

// Generate a simple avatar
const avatarUrl = generateAvatar({ 
  username: "johndoe" 
  });
Basic avatar example
Advanced Options
// All available options

const customAvatar = generateAvatar({
  username: "scarlett",    // Required: Seed for the avatar
  size: 300,             // Optional: Size in pixels (default: 140)
  format: "svg",         // Optional: 'png' or 'svg' (default: 'png')
  rounded: 80,           // Optional: Corner roundness (default: 70)
  userLogo: true,        // Optional: Add user icon (default: false)
  text: "JD"            // Optional: Add text/initials (SVG only)
  });
Advanced avatar example
Examples

Professional Avatar:

generateAvatar({
  username: "ceo@company.com",
  size: 500,
  rounded: 100,
  text: "CEO"
  })
Professional avatar example

Social Media Profile:

generateAvatar({
  username: "cool_user_123",
  size: 200,
  format: "svg",
  userLogo: true      // Add user icon
  })
Social media avatar example