Avatar Generator

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: #22c55e;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  border-radius: 50%;
  
  
  position: relative;
  overflow: hidden;
  user-select: none;
  flex-shrink: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar svg {
  width: 24px;
  height: 24px;
}

<div class="avatar">
  JD
</div>

import './Avatar.css';

function Avatar({ name, src, icon, status, size = 48 }) {
  const getInitials = (fullName) => {
    if (!fullName) return '?';
    const names = fullName.trim().split(' ').filter(Boolean);
    if (names.length === 1) return names[0].charAt(0).toUpperCase();
    return (names[0].charAt(0) + names[names.length - 1].charAt(0)).toUpperCase();
  };

  return (
    <div className="avatar" style={{ width: size, height: size }}>
      {src ? (
        <img src={src} alt={name} />
      ) : icon ? (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          {/* Icon path here */}
        </svg>
      ) : (
        getInitials(name)
      )}
      {status && status !== 'none' && (
        <span className={`avatar-status avatar-status--${status}`} />
      )}
    </div>
  );
}

export default Avatar;