<div class="title">Hello</div>

.title{
  position: relative;
  transition: color .3s ease-out;
  padding-left: 30px;
  --coord: 3px;
}

.title{
  color: red;
  transition: 0.34s linear
}

.title:hover{
  color: blue;
}

.title:after{
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: var(--coord);
  left: 0;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCA0MCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBmaWxsPSIjRkYwODA5Ii8+CjxyZWN0IHg9IjIwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9IiMwNDAwRDkiLz4KPC9zdmc+Cg==) no-repeat;
  transition: 0.34s linear
}

.title:before{
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: var(--coord);
  left: 0;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCA0MCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBmaWxsPSIjRkYwODA5Ii8+CjxyZWN0IHg9IjIwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9IiMwNDAwRDkiLz4KPC9zdmc+Cg==) no-repeat;
  background-position: -20px 0;
}

.title:hover:after{
  opacity: 0;
}