Seeded
Deterministic avatars from any string, user id, team, or slug.
procedural svg avatars
Planet Avatar
Procedural SVG avatars with retro planet texture.
SVG native
Self-contained markup with no image assets or canvas runtime.
Tiny output
Small generated SVGs that stay sharp at every avatar size.
Themeable
Built-in palettes plus custom color arrays for product identity.
Type any seed. Get the same planet every time.
The generator returns a self-contained SVG string, so it works in vanilla JS and stays easy to wrap for frameworks.
Presets
Named visual styles you can pass directly to the `variant` option.
Seed examples
Any string can become a stable avatar, even when the preset stays on `auto`.
One package. Three surfaces.
Import the core generator for vanilla JavaScript, or use thin React and Vue adapters from subpath exports.
import { createPlanetAvatar, mountPlanetAvatar } from 'planet-avatar'
const svg = createPlanetAvatar({
seed: 'nova-42',
size: 128,
variant: 'luna',
rings: true,
title: 'Nova avatar'
})
document.querySelector('#avatar').innerHTML = svg
mountPlanetAvatar(document.querySelector('#compact'), {
seed: 'viking',
size: 48
})import { PlanetAvatar, usePlanetAvatar } from 'planet-avatar/react'
export function ProfileAvatar() {
const svg = usePlanetAvatar({
seed: 'nova-42',
size: 128,
variant: 'luna',
rings: true,
title: 'Nova avatar'
})
return (
<div>
<PlanetAvatar seed="viking" size={64} variant="orbit" />
<output>{svg.length}</output>
</div>
)
}<script setup lang="ts">
import { PlanetAvatar } from 'planet-avatar/vue'
</script>
<template>
<PlanetAvatar
seed="viking"
:size="64"
variant="orbit"
title="Viking avatar"
/>
</template>Avatar scale
Built to live inside product UI.
Planet Avatar stays legible as a small account image, member badge, or activity feed identity.
Team +12
Active now Viking Product engineer
Mira Chen Design systems
Atlas Rowe Infrastructure
Luna Park Community
Sol Bennett Research
Flux Ito Frontend