JSFiddle - React, Tailwind, and code Playground

by Nayaabkhan Khan

HTML

<ul>
  <li class="icon handshake"></li>
  <li class="icon selfie"></li>
  <li class="icon moneybag"></li>
  <li class="icon shopping-bags"></li>
  <li class="icon calendar"></li>
  <li class="icon thought-balloon"></li>
</ul>

CSS

li {
  list-style-type: none;
}

.icon {
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
}

.handshake::before {
  content: '\1F91D';
}

.selfie::before {
  content: '\1F933';
}

.moneybag::before {
  content: '\1F4B0';
}

.shopping-bags::before {
  content: '\1F6CD';
}

.calendar::before {
  content: '\1F4C6';
}

.thought-balloon::before {
  content: '\1F4AD';
}