Как реализовать фрагмент макета psd

Решение через фоновую картиyку

<div class="wrap">
      <div class="item">
        <div class="item-img"></div>
        <div class="item-text">
          Натуральные ингредиенты
        </div>
      </div>
      <div class="item">
        <div class="item-img"></div>
        <div class="item-text">
          Доставка бесплатно при заказе от 2000 рублей
        </div>
      </div>
    </div>

.wrap {
  display: flex;
  max-width: 600px;
}
.item {
  display: flex;
  flex-basis: 50%;
  padding: 20px;
}
.item-img {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: url("https://image.freepik.com/free-icon/no-translate-detected_318-60914.jpg") no-repeat center;
  background-size: 100%;
}
.item-text {
  margin: 0 0 0 20px;
}

Решение через Img

<div class="wrap">
  <div class="item">
    <div class="item-img">
      <img src="https://image.freepik.com/free-icon/no-translate-detected_318-60914.jpg" alt="img">
    </div>
    <div class="item-text">
      Натуральные ингридиенты
    </div>
  </div>
  <div class="item">
    <div class="item-img">
      <img src="https://image.freepik.com/free-icon/no-translate-detected_318-60914.jpg" alt="img">
    </div>
    <div class="item-text">
      Доставка бесплатно при заказе от 2000 рублей
    </div>
  </div>
</div>

.wrap {
  display: flex;
  max-width: 600px;
}
.item {
  display: flex;
  flex-basis: 50%;
  padding: 20px;
}
.item-img {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}
.item-img img {
  width: 100%;
  height: auto;
}
.item-text {
  margin: 0 0 0 20px;
}

Укажи для img и текста display: inline-block. А если текст достаточно большой что не помещается рядом с картинкой и уходит вниз то укажи какой нибудь max-width.

Можно сделать через :before

div class="wrap">
    <div class="item-text">
      Натуральные ингредиенты
    </div>
</div>
.item-text{
  position:relative;
  padding: 0 0 0 30px;
 }
.item-text:before{
  position: absolute;
  display: block;
  content: "";
  width:20px;
  height:20px;
  background: url(какойто);
  left: -30px;
 }

Я реализую таким способом если не использовать библиотеки. Такой подход мне нравится тем что очень просто адаптировать под различные устройства добавив пару строк кода родительскому элементу и поиграть со свойством order дочерних элементов.

Добавлю: Иконки можно вставить в сам HTML и лучше в формате base64.

.paren-parent{ 
  display: flex; 
} 
.parent{ 
  display: flex; 
  justify-content: center; 
} 
.icon{ 
  display: flex; 
  align-items: center; 
  width: 100px; 
  background-image: url(https://png.icons8.com/ios/64/000000/fortnite-filled.png); 
  background-position: 50%; 
  background-repeat: no-repeat; 
}

<div class="paren-parent"> 
  <div class="parent"> 
    <div class="icon"></div> 
    <div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div> 
  </div> 
  <div class="parent"> 
    <div class="icon"></div> 
    <div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div> 
  </div> 
</div>