WUI logo


The Avatar component displays a user's profile picture or initials in a circular or square format. It helps create a personalized and recognizable interface element, representing users visually across different parts of the application.

import * as React from 'react'
import { Avatar } from '@welcome-ui/avatar'
const Example = () => {
return (
name="Welcome jungle"
export default Example



Run the following command:

yarn add @welcome-ui/avatar

Import component:

import { Avatar } from '@welcome-ui/avatar'


We use Shape component. You can use size from theme or override with w and h size.

Only text

Without image we add initials on the avatar with property name. We get by default ramdom color from sub colors to create the background, based on the name string. You can override with color. Font size is calculated automatically and can be override with fontSizeproperty.


By default Avatar is a circle shape, change with property shape.