<div class="wrap">
  <ul>
    <li><span class="icon icon01">N</span>
    <li><span class="icon icon02">H</span>
    <li><span class="icon icon03">1</span>
    <li><span class="icon icon04">요리</span>
    <li><span class="icon icon05">모바일</span>
  </ul>
</div>

.icon{display:inline-block}
.icon01{width:12px;height:12px;margin-left:5px;background:#1a7fec;color:#fff;border-radius:2px;font-size:10px;text-align:center;line-height:12px;vertical-align:middle}
.icon02{width:12px;height:12px;margin-left:5px;background:#ff661c;color:#fff;border-radius:2px;font-size:10px;text-align:center;line-height:12px;vertical-align:middle}
.icon03{width:14px;height:14px;margin-left:5px;background:#ff0000;color:#fff;border-radius:2px;font-size:12px;text-align:center;line-height:14px;vertical-align:middle}

.icon04{width:45px;height:14px;margin-left:5px;background:#ffcc00;color:#333;border-radius:2px;font-size:12px;text-align:center;line-height:14px;vertical-align:middle}
.icon05{width:45px;height:14px;margin-left:5px;background:#ff0000;color:#fff;border-radius:2px;font-size:12px;text-align:center;line-height:14px;vertical-align:middle}