# Avatar
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.
## Overview
```tsx
import { Avatar } from 'welcome-ui/Avatar'
const Example = () => {
return (
<>
)
}
export default Example
```
## Examples
### Image
Pass an image url with `src="you-url"`.
```tsx
import { Avatar } from 'welcome-ui/Avatar'
const Example = () => {
return (
<>
)
}
export default Example
```
### Placeholder
If no image is provided and no name is given, we display a generic placeholder.
```tsx
import { Avatar } from 'welcome-ui/Avatar'
const Example = () => {
return
}
export default Example
```
### Text
If no image is provided we create a two-letter initial based on the name. We choose a random colour from secondaries theme colours for the background. For `xs`and `sm` sizes, we only display the first letter.
```tsx
import { Avatar } from 'welcome-ui/Avatar'
const Example = () => {
return (
<>
)
}
export default Example
```
### Size
You can use `xs`, `sm`, `md` and `lg` sizes.
```tsx
import { Avatar } from 'welcome-ui/Avatar'
const Example = () => {
return (
)
}
export default Example
```
## Props
### Avatar
```tsx
interface AvatarProps {
getInitials?: (name: string) => string
name?: string
/** Default: md */
size?: 'xs' | 'sm' | 'md' | 'lg'
src?: string
}
```