Avatars - Space UI

What is it?

@usespaceui/avatars

Beautiful generative gradient avatars. A zero-dependency SVG avatar generator that dynamically generates beautiful, unique avatars from any seed string. Say goodbye to storing thousands of placeholder images.

Installation

Install via your preferred package manager or use the REST API directly. See the API documentation for more details.

Bash

pnpm add @usespaceui/avatars

How to use

Use the React component for simple integration, or use the vanilla createAvatar function to generate SVG strings or JSON payloads without rendering the React component.

React Component

Code

import { AvatarVariant, AvatarEffect } from '@usespaceui/avatars'
import { Avatar } from '@usespaceui/avatars/react';

export function UserProfile({ username }: { username: string }) {
  return (
    <Avatar
      name="Space UI"
      variant={AvatarVariant.pebble}
      size={64}
      circle={true}
      effect={AvatarEffect.none}
    />
  );
}

Vanilla / JSON

Code

import { createAvatar, AvatarVariant, AvatarEffect, AvatarOutputFormat } from '@usespaceui/avatars';

const defaultSvg = createAvatar();

const svgMarkup = createAvatar({
  name: "alex",
  variant: AvatarVariant.triton,
  size: 256,
  effect: AvatarEffect.none,
});

const jsonPayload = createAvatar({
  name: "alex",
  variant: AvatarVariant.pebble,
  format: AvatarOutputFormat.json,
});

Families & Customization

Choose from gradient, fluid, classic, and paletteless families. Every variant renders deterministically from its seed. You can fully customize the look and feel by tweaking the colors array or changing the variant.

Code

// Your brand palette instead of the name-derived harmony.
<Avatar
  name="Space UI"
  colors={["#4f46e5", "#06b6d4", "#ec4899", "#8b5cf6", "#14b8a6"]}
/>

Check out the variants documentation.

Keep in mind

Avatars are deterministic. The same seed + variant will always yield the same visual output.
They render purely in SVG, meaning infinite scalability and crispness on Retina displays.
No network requests are made. Everything generates locally.

License & Usage

Free and open source under the MIT license. Feel free to use it in your commercial or personal projects, with no attribution required.

pnpm add @usespaceui/avatars