---
title: "Avatar (BloomAvatar) — Bloom UI Primitive"
description: "An image element with a fallback monogram for representing the user with 24/32/40px sizes and AvatarGroup."
category: "Data Display & AI"
url: "https://bloom-platform-ten.vercel.app/ui/avatar"
component_name: "BloomAvatar"
pub_package: "bloom_ui"
cli_command: "bloom ui add avatar"
last_updated: "2026-08-15"
---

# Avatar (`BloomAvatar`)

> An image element with a fallback monogram for representing the user with 24/32/40px sizes and AvatarGroup.

**Category:** Data Display & AI  
**Package:** [`bloom_ui`](https://pub.dev/packages/bloom_ui)  
**CLI Install:** `bloom ui add avatar`  
**Web Preview:** [https://bloom-platform-ten.vercel.app/ui/avatar](https://bloom-platform-ten.vercel.app/ui/avatar)

---

## 📦 Installation & Setup

### 1. Using Bloom CLI (Recommended)
Add the source code directly to your project without rigid package locks:
```bash
bloom ui add avatar
```

### 2. Using Pub.dev Package
Add the dependency to your `pubspec.yaml`:
```yaml
dependencies:
  bloom_ui: ^0.1.0
```

### 3. Import in Dart
```dart
import 'package:bloom_ui/bloom_ui.dart';
```

---

## 🚀 Usage Example

```dart
BloomAvatar(
  image: const NetworkImage(
    'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=120&h=120&q=80',
  ),
  name: 'Sophia Davis',
  size: BloomAvatarSize.lg,
  badge: const BloomAvatarBadge(
    color: Colors.green,
  ),
)
```

---

## 🛠️ API Reference

**Available Sizes:** `sm (24px)`, `defaultSize (32px)`, `lg (40px)`

### Properties & Parameters

| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `image` | `ImageProvider?` | *Required* | User image source (e.g. NetworkImage from Unsplash or AssetImage). |
| `name` | `String?` | *Required* | Fallback name used to generate monogram initials (e.g. "Sophia Davis"). |
| `size` | `BloomAvatarSize` | `defaultSize` | Size step: sm (24px), defaultSize (32px), lg (40px). |
| `badge` | `Widget?` | *Required* | Optional status indicator badge (e.g. online presence dot). |

---

## 🎨 Theming & Styling

BloomAvatar automatically respects the active `BloomTheme` (including `BloomTheme.novaLight`, `BloomTheme.novaDark`, etc.) and responds seamlessly to dark mode changes, custom border radii, and brand color tokens.

### Theme Overrides Example
```dart
Theme(
  data: Theme.of(context).copyWith(
    extensions: [
      context.bloomTheme.copyWith(
        colors: context.bloomColors.copyWith(
          primary: const Color(0xFF8B5CF6), // Custom Purple Accent
        ),
      ),
    ],
  ),
  child: BloomAvatar(...,
)
```

---

## 🔗 Related Resources
- [Components Gallery](https://bloom-platform-ten.vercel.app/ui)
- [Bloom Theming & Tokens Guide](https://bloom-platform-ten.vercel.app/docs/theming)
- [Application Blocks Catalog](https://bloom-platform-ten.vercel.app/blocks)
- [Bloom CLI Master Overview](https://bloom-platform-ten.vercel.app/docs/cli)