.y-avatar {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #d8d8d8;
  height: 40px;
  width: 40px;
  font-size: 20px;
}
.y-avatar.y-avatar-circle {
  border-radius: 10000px;
}
.y-avatar.y-avatar-square {
  border-radius: 4px;
}
.y-avatar.y-avatar-icon {
  font-size: 28px;
}
.y-avatar.y-avatar-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.y-avatar.y-avatar-large {
  height: 48px;
  width: 48px;
  font-size: 24px;
}
.y-avatar.y-avatar-large.y-avatar-icon {
  font-size: 33.6px;
}
.y-avatar.y-avatar-small {
  height: 32px;
  width: 32px;
  font-size: 16px;
}
.y-avatar.y-avatar-small.y-avatar-icon {
  font-size: 22.4px;
}