# Avatar
An image with a fallback for representing the user.
```tsx
import { Avatar } from '@skeletonlabs/skeleton-react';
export default function Default() {
return (
{/* Small */}
SK
{/* Base */}
SK
{/* Large */}
SK
);
}
```
## Fallback
Use a fallback when an image fails to load or is unavailable.
```tsx
import { Avatar } from '@skeletonlabs/skeleton-react';
export default function Fallback() {
return (
SK
);
}
```
## Filter
Apply [SVG Filters](/docs/\[framework]/guides/cookbook/svg-filters) to avatar images.
```tsx
import { Avatar } from '@skeletonlabs/skeleton-react';
export default function Filter() {
return (
<>
SK
);
}
```
## Anatomy
Here's an overview of how the Avatar component is structured in code:
```tsx
import { Avatar } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
);
}
```
## API Reference