---
title: "Avatar"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Avatar with image, initials, and icon variants. Supports stacked groups, status indicators, and multiple sizes—zero JavaScript required."
url: https://frutjam.com/tr/components/avatar
---

# Avatar Component

 Avatar bileşenleri, kullanıcı profili resimlerini veya baş harflerini kompakt, özelleştirilebilir bir kapta görüntüler. Frutjam'ın CSS özel özellikleriyle oluşturulan avatarlar, arayüzünüzdeki kullanıcıları, katkıda bulunanları veya ekip üyelerini temsil eder. Avatar sistemi, görselleri ve metni, çoklu boyutları, renkleri, şekilleri, durum göstergelerini, halkaları ve grup düzenlemelerini destekler; kullanıcı listeleri, yorumlar, ekip görünümleri, profil bölümleri ve mesajlaşma arayüzleri için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf                 | Tip         | Tanım                                              |
| --------------------- | ----------- | -------------------------------------------------- |
| avatar                | Temel       | Baş harfleri veya resmi olan dairesel avatar kabı  |
| avatar-group          | Değiştirici | Birden fazla avatarın örtüşen yığını               |
| avatar-ring           | Değiştirici | Avatarın etrafına renkli bir halka kenarlığı ekler |
| avatar-circle         | Stil        | Tamamen dairesel şekil (varsayılan)                |
| avatar-rounded        | Stil        | Yuvarlatılmış dikdörtgen şekli                     |
| avatar-square         | Stil        | Yuvarlama olmadan kare şekil                       |
| avatar-online         | Stil        | Yeşil çevrimiçi durum göstergesi                   |
| avatar-away           | Stil        | Sarı deplasman durum göstergesi                    |
| avatar-busy           | Stil        | Kırmızı meşgul durumu göstergesi                   |
| avatar-offline        | Stil        | Gri çevrimdışı durum göstergesi                    |
| avatar-xs             | Boyut       | Ekstra küçük                                       |
| avatar-sm             | Boyut       | Küçük                                              |
| avatar-md             | Boyut       | Orta (varsayılan)                                  |
| avatar-lg             | Boyut       | Büyük                                              |
| avatar-xl             | Boyut       | Ekstra büyük                                       |
| avatar-2xl            | Boyut       | 2x ekstra büyük                                    |
| avatar-primary        | Renk        | Birincil tema rengi                                |
| avatar-secondary      | Renk        | İkincil tema rengi                                 |
| avatar-accent         | Renk        | Vurgu teması rengi                                 |
| avatar-neutral        | Renk        | Nötr tema rengi                                    |
| avatar-info           | Renk        | Bilgi anlamsal rengi                               |
| avatar-success        | Renk        | Başarı anlamsal rengi                              |
| avatar-warning        | Renk        | Uyarı anlamsal rengi                               |
| avatar-error          | Renk        | Hata anlamsal rengi                                |
| avatar-ring-primary   | Renk        | Ana renkte halka                                   |
| avatar-ring-secondary | Renk        | İkincil renkte halka                               |
| avatar-ring-accent    | Renk        | Vurgu renginde halka                               |
| avatar-ring-neutral   | Renk        | Nötr renkte halka                                  |
| avatar-ring-info      | Renk        | Bilgi renginde halka                               |
| avatar-ring-success   | Renk        | Başarı renginde yüzük                              |
| avatar-ring-warning   | Renk        | Uyarı renginde halka                               |
| avatar-ring-error     | Renk        | Hata renginde zil sesi                             |

## Temel Kullanım

Metin baş harfleri veya renkleri ile basit avatarlar oluşturun.

## Görsellerle Avatar

Otomatik görüntü yerleştirme ve duyarlı boyutlandırma ile kullanıcı profili fotoğraflarını görüntüleyin.

```html
<div class="avatar avatar-sm">
  <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=32&height=32&face_crop=true" alt="Strawbery" loading="lazy" />
</div>

<div class="avatar avatar-md">
  <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=40&height=40&face_crop=true" alt="Strawbery" loading="lazy" />
</div>

<div class="avatar avatar-lg">
  <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=56&height=56&face_crop=true" alt="Strawbery" loading="lazy" />
</div>
```

## Avatar Boyutları

Farklı bağlamlar için avatarları ekstra küçükten (xs) 2x büyüğe (2xl) kadar ölçeklendirmek için boyut çeşitlerini kullanın.

```html
<div class="avatar avatar-xs avatar-primary">XS</div>
<div class="avatar avatar-sm avatar-secondary">SM</div>
<div class="avatar avatar-md avatar-accent">MD</div>
<div class="avatar avatar-lg avatar-primary">LG</div>
<div class="avatar avatar-xl avatar-secondary">XL</div>
<div class="avatar avatar-2xl avatar-accent">2XL</div>
```

## Avatarın Renkleri

Görselleri kullanmadığınızda avatarları role, takıma veya duruma göre ayırt etmek için renk çeşitleri uygulayın.

```html
<div class="avatar avatar-md avatar-primary">A</div>
<div class="avatar avatar-md avatar-secondary">B</div>
<div class="avatar avatar-md avatar-accent">C</div>
<div class="avatar avatar-md avatar-info">D</div>
<div class="avatar avatar-md avatar-neutral">E</div>
<div class="avatar avatar-md avatar-success">F</div>
<div class="avatar avatar-md avatar-warning">G</div>
<div class="avatar avatar-md avatar-error">H</div>
```

## Avatar Şekilleri

Tasarım sisteminize uyacak şekilde dairesel (varsayılan), yuvarlak veya kare şekiller arasından seçim yapın.

```html
<div class="avatar avatar-lg avatar-circle avatar-primary">●</div>
<div class="avatar avatar-lg avatar-rounded avatar-secondary">◇</div>
<div class="avatar avatar-lg avatar-square avatar-accent">■</div>
```

## Baş Harfleri Olan Avatar

Listelerde, yorum dizilerinde ve ekip bölümlerinde hızlı tanımlama için kullanıcının baş harflerini görüntüleyin.

```html
<div class="avatar avatar-sm avatar-primary">JD</div>
<div class="avatar avatar-md avatar-secondary">AR</div>
<div class="avatar avatar-lg avatar-accent">MS</div>
<div class="avatar avatar-xl avatar-info">KL</div>
```

## Durum Göstergeli Avatar

Kullanıcının varlığını veya uygunluğunu (çevrimiçi, çevrimdışı, meşgul, dışarıda) göstermek için avatarları durum rozetleriyle birleştirin.

```html
<div class="avatar avatar-md avatar-online avatar-primary">JD</div>

<div class="avatar avatar-md avatar-offline avatar-secondary">AR</div>

<div class="avatar avatar-md avatar-busy avatar-accent">MS</div>

<div class="avatar avatar-md avatar-away avatar-info">KL</div>
```

## Halka Kenarlı Avatar

Vurgu, durum vurgulaması veya görsel ayrım için avatarların çevresine dekoratif halkalar ekleyin.

```html
<div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div>
<div class="avatar avatar-lg avatar-ring avatar-ring-secondary avatar-secondary">B</div>
<div class="avatar avatar-xl avatar-ring avatar-ring-accent avatar-accent">C</div>
```

### Yüzük Rengi Çeşitleri

Halka renklerini avatar arka plan renklerinden bağımsız olarak seçin.

```html
<div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div>
<div class="avatar avatar-md avatar-ring avatar-ring-secondary avatar-secondary">B</div>
<div class="avatar avatar-md avatar-ring avatar-ring-accent avatar-accent">C</div>
<div class="avatar avatar-md avatar-ring avatar-ring-info avatar-info">D</div>
<div class="avatar avatar-md avatar-ring avatar-ring-success avatar-success">E</div>
<div class="avatar avatar-md avatar-ring avatar-ring-warning avatar-warning">F</div>
<div class="avatar avatar-md avatar-ring avatar-ring-error avatar-error">G</div>
```

## Avatar Grubu

Ekip üyelerinin ve ortak çalışanların üst üste görüntülenmesi için birden fazla avatarı otomatik negatif kenar boşluğuyla üst üste koyun.

```html
<div class="avatar-group">
  <div class="avatar avatar-md avatar-primary">A</div>
  <div class="avatar avatar-md avatar-secondary">B</div>
  <div class="avatar avatar-md avatar-accent">C</div>
  <div class="avatar avatar-md avatar-info">D</div>
</div>
```

### Farklı Boyutlarda Avatar Grubu

Görsel hiyerarşi için birden fazla boyutu bir grup içinde birleştirin.

```html
<div class="avatar-group">
  <div class="avatar avatar-sm avatar-primary">A</div>
  <div class="avatar avatar-md avatar-secondary">B</div>
  <div class="avatar avatar-lg avatar-accent">C</div>
</div>
```

### Durumlu Avatar Grubu

Bir ekip grubundaki her üyenin uygunluk durumunu gösterin.

```html
<div class="avatar-group">
  <div class="avatar avatar-md avatar-online avatar-primary">A</div>
  <div class="avatar avatar-md avatar-offline avatar-secondary">B</div>
  <div class="avatar avatar-md avatar-busy avatar-accent">C</div>
</div>
```

## Kombine Varyantlar

Karmaşık avatar gösterimleri için boyut, renk, şekil, durum ve zil değiştiricileri karıştırıp eşleştirin.

```html
<div class="avatar avatar-xl avatar-rounded avatar-ring avatar-ring-success avatar-success avatar-online">SK</div>

<div class="avatar avatar-lg avatar-square avatar-ring avatar-ring-primary avatar-primary">AB</div>

<div class="avatar avatar-2xl avatar-circle avatar-ring avatar-ring-error avatar-error avatar-busy">MR</div>
```