Deterministic avatars from anything.

index.tsimport { avatar } from 'avaroid'

const svg: string = avatar('david@example.com')

// options are optional
avatar('david@example.com', {
  size: 128,
  background: 'auto',
  radius: 24,
})

index.jsimport { avatar } from 'avaroid'

const el = document.querySelector('#me')
el.innerHTML = avatar(user.email, { size: 128 })

// or as an <img> source
img.src = avatar(user.id, {
  radius: 24,
  format: 'data-url',
})

UserChip.tsximport { Avatar } from 'avaroid/react'

export function UserChip({ user }) {
  return (
    <Avatar
      seed={user.email}
      size={128}
      radius={24}
      alt={user.name}
    />
  )
}

UserChip.vue<script setup lang="ts">
import { Avatar } from 'avaroid/vue'

defineProps<{ email: string }>()
</script>

<template>
  <Avatar :seed="email" :size="128" :radius="24" />
</template>

UserChip.svelte<script lang="ts">
  import { Avatar } from 'avaroid/svelte'

  let { email }: { email: string } = $props()
</script>

<Avatar seed={email} size={128} radius={24} />

user-chip.component.tsimport { Component, input } from '@angular/core'
import { AvatarComponent } from 'avaroid/angular'

@Component({
  selector: 'app-user-chip',
  imports: [AvatarComponent],
  template: `<avaroid-avatar [seed]="email()" [size]="128" [radius]="24" />`,
})
export class UserChip {
  readonly email = input.required<string>()
}