React

The Avatar component renders an <svg> element directly. It is the shortest path for product UI.

Render from a seed

Pass any stable string — a user id, an email, a username. The same seed picks the same parts every time for a given asset package version.

felix

ayaka

user_10482

orange

a1b2c3

import { Avatar } from '@humation/react';
import { humation1 } from '@humation/assets-humation-1';

export function UserAvatar({ user }: { user: { id: string; name: string } }) {
  return (
    <Avatar
      assets={humation1}
      seed={user.id}
      size={96}
      title={user.name}
    />
  );
}

Render from explicit selections

When the user picks their own avatar, pass selections and colors instead of a seed. Part names, aliases, and canonical IDs are all accepted.

<Avatar
  assets={humation1}
  selections={{ head: 'braids', body: 'hoodie', item: 'calico-cat' }}
  colors={{ hair: '#4A3728', skin: '#F4C9A8' }}
  size={128}
/>

Names are listed on Parts. Combining a seed with selections is fine: the seed fills every slot, and explicit selections override the ones you name.

Colors are CSS custom properties

The colors prop is applied as CSS custom properties on the <svg> element, so changing a color never re-renders the avatar content. Slots you leave out keep the defaults baked into the assets and stay themeable from your own CSS.

.avatar-on-dark {
  --hm-stroke: #ffffff;
  --hm-background: transparent;
}

Accessibility

Pass title when the avatar identifies someone. Without it the avatar is treated as decorative and hidden from screen readers, which is the right default next to a visible name.

<Avatar assets={humation1} seed={user.id} title={user.name} />

<span aria-hidden="true"><Avatar assets={humation1} seed={user.id} /></span>
<span>{user.name}</span>

Every remaining SVG prop is forwarded to the root element, so className, style, onClick, and ref work as usual. The full list is in Options.