Develop ultra fast with Prismane 🎉


Avatar displays a profile picture or a color background with initials.


import { Avatar } from "@prismane/core";


By default, if no initials or image are provided, Avatar uses a placeholder icon.

<Avatar />

Custom Placeholder Icon

By providing an icon as a direct child of Avatar, you can overwrite our placeholder icon.

  <User weight="bold" size={36} />

Image Avatar

<Avatar src="" />

Initials Avatar

By default, Avatar uses the base color, if no source is provided.


Color Avatar

  <Avatar color="ruby">MP</Avatar>
  <Avatar color="copper">MP</Avatar>
  <Avatar color="teal">MP</Avatar>

Avatar Sizes

  <Avatar size="xs">MP</Avatar>
  <Avatar size="sm">MP</Avatar>
  <Avatar size="base">MP</Avatar>
  <Avatar size="md">MP</Avatar>
  <Avatar size="lg">MP</Avatar>


Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.