Avatars - Profile Picture Components

Beautiful avatar components with multiple sizes, status indicators, groups, badges, and hover effects. Perfect for user profiles, comment sections, and team displays.

1. Circular Avatars - Multiple Sizes

/* Size variations */
.avatar-xs { width: 24px; height: 24px; font-size: 0.6rem; }
.avatar-sm { width: 32px; height: 32px; font-size: 0.75rem; }
.avatar-md { width: 48px; height: 48px; font-size: 1rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.5rem; }
.avatar-xl { width: 96px; height: 96px; font-size: 2rem; }
.avatar-2xl { width: 128px; height: 128px; font-size: 2.5rem; }

.avatar {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  background: #2563eb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

2. Avatar with Status Indicator (Online/Offline)

.avatar-with-status {
  position: relative;
  display: inline-block;
}

.status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.status-online { background: #43e97b; }
.status-busy { background: #ff6b6b; }
.status-away { background: #ffd93d; }
.status-offline { background: #9e9e9e; }

3. Avatar Groups/Stacks

.avatar-group {
  display: inline-flex;
  flex-direction: row-reverse;
}

.avatar-group .avatar {
  margin-left: -12px;
  border: 3px solid white;
  transition: transform 0.2s ease;
  position: relative;
}

.avatar-group .avatar:first-child {
  margin-left: 0;
}

.avatar-group .avatar:hover {
  transform: translateY(-4px) scale(1.1);
  z-index: 10;
}

4. Fallback Initials

5. Image + Border Variations

/* Border variations */
.avatar-border-thick {
  border: 4px solid white;
  box-shadow: 0 0 0 2px #2563eb, 0 4px 12px rgba(0,0,0,0.15);
}

/* Animated gradient border */
.avatar-animated-border {
  padding: 4px;
  background: #2563eb;
  background-size: 400% 400%;
  animation: gradient-rotate 3s ease infinite;
}

/* Shape variations */
.avatar-square { border-radius: 8px; }
.avatar-rounded { border-radius: 12px; }

6. Hover Effects

/* Hover effects */
.avatar-hover:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.avatar-hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}

.avatar-hover-glow:hover {
  box-shadow: 0 0 20px rgba(102,126,234,0.6);
}

7. Badge Overlays

.avatar-with-badge {
  position: relative;
  display: inline-block;
}

.avatar-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
  border: 2px solid white;
}

.avatar-badge-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

8. Avatar in List Item

9. Skeleton Loading State

.avatar-skeleton {
  background: linear-gradient(
    90deg,
    #e0e0e0 0%,
    #f0f0f0 50%,
    #e0e0e0 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

10. Real-World Examples