JSFiddle - React, Tailwind, and code Playground

HTML

<button class="btn btn-ico">
  <i class="icon">
    <svg fill="#ffffff" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
      <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"></path>
      <path d="M0 0h24v24H0z" fill="none"></path>
    </svg>
  </i>
</button>
<a href="#" class="btn btn-ico">
  <i class="icon">
    <svg fill="#ffffff" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
      <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"></path>
      <path d="M0 0h24v24H0z" fill="none"></path>
    </svg>
  </i>
</a>

CSS

.btn {    
    background: blue;
    color arial;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    line-height: 20px;
    padding: 8px 16px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase ;
    cursor: pointer;
    border: none;
    border-radius: 2px;
    overflow: hidden; // Kvuli animaci po kliku
    position: relative;
}
/* Ikonkovy button */
.btn-ico{
    font-size: 0;
    line-height: 0;
    padding: 9px;
    border-radius: 50%;
}