.icon {
  display: block;
  height: 25px;
  width: 25px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-new-chat {
  background-image: url(/img/icon-new-chat.svg);
  background-position-x: -3px;
}

.icon-arrow-right {
  background-image: url(/img/icon-arrow.svg);
}
.icon-arrow-right-green {
  background-image: url(/img/icon-arrow-right-green.svg);
}

.icon-arrow-back {
  background-image: url(/img/icon-arrow-back.svg);
}
.icon-arrow-left-green {
  background-image: url(/img/icon-arrow-left-green.svg);
}

.icon-attachment {
  background-image: url(/img/icon-attachment.svg);
}

.icon-send {
  background-image: url(/img/icon-send.svg);
}

.icon-message-delivered {
  background-color: #757575;
  mask: url(/img/icon-message-read.svg);
  -webkit-mask: url(/img/icon-message-read.svg);
  width: 16px;
  height: 9px;
}
.icon-message-sent {
  background-image: url(/img/icon-message-sent.svg);
  width: 12px;
  height: 9px;
}

.icon-message-read {
  background-image: url(/img/icon-message-read.svg);
  height: 9px;
  width: 16px;
}

.icon-message-failed {
  background-image: url(/img/icon-message-failed.svg);
}

@keyframes rotating {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

.icon-message-sending {
  background-image: url(/img/icon-message-sending.svg);
  height: 10px;
  width: 10px;
  animation: rotating 2s infinite linear;
}

.icon-attachment-file {
  background-image: url(/img/icon-file-attachment.svg);
}

.icon-attachment-cancel {
  background-image: url(/img/icon-cancel.svg);
}

.icon-attachment-image {
  background-image: url(/img/icon-image-attachment.svg);
}

.icon-search {
  background-image: url(/img/icon-search.svg);
}

.icon-new-chat-group {
  background-image: url(/img/icon-new-chat-group.svg);
}

.icon-cross-red {
  background-image: url(/img/icon-cross-red.svg);
}
.icon-check-green {
  background-image: url(/img/icon-check-green.svg);
}
.icon-check {
  background-image: url(/img/icon-check.svg);
}
.icon-avatar-picker {
  background-image: url(/img/icon-avatar-picker.svg);
}
.icon-id-card {
  background-image: url(/img/icon-id-card.svg);
}
.icon-user {
  background-image: url(/img/icon-user.svg);
}
.icon-pencil-grey {
  background-image: url(/img/icon-pencil-grey.svg);
}
.icon-pencil-white {
  background-image: url(/img/icon-pencil-white.svg);
}
.icon-logout {
  background-image: url(/img/icon-logout.svg);
}

.icon-add-participant {
  background-image: url(/img/icon-add-participant.svg);
}

.icon-hash {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='4' y1='15' x2='20' y2='15'/%3E%3Cline x1='10' y1='3' x2='8' y2='21'/%3E%3Cline x1='16' y1='3' x2='14' y2='21'/%3E%3C/svg%3E");
}

.icon-group {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.icon-chat {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

.icon-image {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
}