avatar — mica

Example

Initials

Blobatar

Seed variant

Contained

Custom size

Image

Akonwi Ngohakonwi@example.com

Basic usage

<m-avatar role="img" aria-label="Akonwi Ngoh">AN</m-avatar>

<m-avatar>
  <img src="akonwi.jpg" alt="Akonwi Ngoh">
</m-avatar>

<m-avatar role="img" blobatar="akonwi" aria-label="Akonwi Ngoh">AN</m-avatar>

API

The wrapper accepts authored text or one direct image. Blobatar is an optional enhancement of that content.

Attributes

Name	Type	Default	Description
`blobatar`	string seed	—	Generates deterministic color and facial features. Requires `avatar.js`.
`contained`	boolean	`false`	Insets the generated body on the quiet surface. Only affects Blobatar paint.

Content

Content	Contract	Default	Description
Text	initials	—	Remains visible and meaningful without the optional module.
`img`	one direct child	—	Fills the square and crops with `object-fit: cover`. Its intrinsic aspect ratio does not change the avatar's square size.

Styling

Property	Value	Default	Description
`--avatar-size`	`<length>`	`3rem`	Sets both the inline and block size. Initials scale with it.
`--radius-md`	`<length>`	theme	Controls the wrapper and generated body's corner shape.

`avatar.js`

Optional. Reads the blobatar seed and paints deterministic decoration using Blobatar's seed and contrast-safe palette utilities locally; it makes no image or identity request. Without it, authored initials remain intact.

<script type="module" src="mica/avatar.js"></script>

Accessibility

For initials or generated paint, give a standalone avatar role="img" and the person's name with aria-label. A native image carries its name in alt and needs no image role on the wrapper. When visible text alongside the avatar already identifies the person, use aria-hidden="true" on the wrapper and an empty alt on its image to avoid announcing the name twice. Generated paint is decorative; authored initials remain its semantic fallback. Use one visual source per avatar: an image or a blobatar seed.