Documentation

Basic Example

<img src="https://avatar.idolo.dev/john-doe" alt="Avatar" />

React / Next.js

export function UserAvatar({ username }) {
  return (
    <img 
      src={`https://avatar.idolo.dev/${username}`}
      alt={`${username} avatar`}
      width={200}
      height={200}
    />
  );
}

Svelte / SvelteKit

<script>
  let username = "john-doe";
</script>

<img 
  src="https://avatar.idolo.dev/{username}" 
  alt="{username} avatar"
  width="200"
  height="200"
/>

Vue / Nuxt

<template>
  <img 
    :src="`https://avatar.idolo.dev/${username}`"
    :alt="`${username} avatar`"
    width="200"
    height="200"
  />
</template>

<script setup>
const username = ref('john-doe');
</script>

Format

PNG (Portable Network Graphics)

Resolution

High quality, suitable for web and mobile

Caching

Avatars are cached for 1 year (immutable). Perfect for CDN distribution.

Total Variants

50 unique gradient designs

How does it work?

We use a deterministic hash function to convert your text input into a number between 1-50. That number maps to one of our pre-designed gradient avatars.

Can I download the avatars?

Yes! Right-click on any avatar and save it as a PNG file. They're yours to use freely.

Is there a rate limit?

No rate limits! Use it as much as you want. All avatars are pre-generated and cached.

Can I use this commercially?

Yes! Feel free to use these avatars in your commercial projects. No attribution required.