JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://file.myfontastic.com/tYAxi8yq9HQugtnVmUJTNm/icons.css">
<link href="https://file.myfontastic.com/tYAxi8yq9HQugtnVmUJTNm/icons.css" rel="stylesheet">
<ul class="list">
  <li class="list-item">
    <div class="list-item__content">
      <span class="icon icon-bell"></span>
      <span class="label">
        aaaaaa
      </span>
    </div>
  </li>
  <li class="list-item">
    <div class="list-item__content">
      <span class="icon icon-bookmark"></span>
      <span class="label">
        bbbbbb
      </span>
    </div>
  </li>
  <li class="list-item">
    <div class="list-item__content">
      <span class="icon icon-briefcase"></span>
      <span class="label">
        cccccc
      </span>
    </div>
  </li>
</ul>

CSS

ul {
  list-style : none
}
.list-item__content {
  padding: 10px;
  border: 1px solid black;
}
.icon:before, .label {
  vertical-align: middle;
  font-size: 14px;
  line-height: 1;
}