JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
  Логотип 1
</h1>

<h2>
  Логотип 2
</h2>

<div class="wrapper">
  <h3>
    Логотип 3
  </h3>
</div>

CSS

h1 {
  top: 0;
  position: absolute;  
  padding-left: 40px; /* отступ для иконки */  
  left: 50%;
  transform: translateX(-50%);
}

h1:before {
  content: '';
  left: 0;
  top: calc(50% - 15px);
  
  width: 30px;
  height: 30px;
  position: absolute;
  background: url(https://image.flaticon.com/icons/svg/733/733635.svg) no-repeat center;
  background-size: cover;
  
}


h2 {  
  position: relative;  
  padding-left: 40px; /* отступ для иконки */  
  margin: 80px auto 0;  
  display: block;
  width: 120px; /* здесь нужно знать размер логотипа */
}

h2:before {
  content: '';
  left: 0;
  top: calc(50% - 15px);
  
  width: 30px;
  height: 30px;
  position: absolute;
  background: url(https://image.flaticon.com/icons/svg/733/733635.svg) no-repeat center;
  background-size: cover;
  
}


h3 {
  position: relative;  
  line-height: 30px; /* высота строки чтобы логотип-background помещался */
  padding-left: 40px; /* отступ для иконки */    
  display: inline-block;  /* inline-block чтобы элемент центрировался через text-align: center родителя */
  
   /* иконка через background, а не псевдоэлемент */
  background: url(https://image.flaticon.com/icons/svg/733/733635.svg) 0 center no-repeat;
  background-size: 30px;
}

.wrapper {
  text-align: center;
}