<div class="padding-md">
  <div class="flex items-center">
    <svg class="icon margin-right-xxs" viewBox="0 0 32 32" aria-hidden="true"><g stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" stroke="currentColor" fill="none" stroke-miterlimit="10"><path d="M16,20.644A6.968,6.968,0,0,1,13.1,18.9h0a7,7,0,0,1,0-9.9l4.95-4.95a7,7,0,0,1,9.9,0h0a7,7,0,0,1,0,9.9L24.9,17"></path><path d="M16,11.356A6.968,6.968,0,0,1,18.9,13.1h0a7,7,0,0,1,0,9.9l-4.95,4.95a7,7,0,0,1-9.9,0h0a7,7,0,0,1,0-9.9L7.1,15"></path></g></svg>
    <span>The icons inherit the text color and size</span>
  </div>
</div>

<div class="padding-md bg-primary color-white">
  <div class="flex items-center text-md">
    <svg class="icon margin-right-xxs" viewBox="0 0 32 32" aria-hidden="true"><g stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" stroke="currentColor" fill="none" stroke-miterlimit="10"><path d="M16,20.644A6.968,6.968,0,0,1,13.1,18.9h0a7,7,0,0,1,0-9.9l4.95-4.95a7,7,0,0,1,9.9,0h0a7,7,0,0,1,0,9.9L24.9,17"></path><path d="M16,11.356A6.968,6.968,0,0,1,18.9,13.1h0a7,7,0,0,1,0,9.9l-4.95,4.95a7,7,0,0,1-9.9,0h0a7,7,0,0,1,0-9.9L7.1,15"></path></g></svg>
    <span>Label</span>
  </div>
</div>

<div class="padding-md">
  <div class="flex items-center text-lg">
    <svg class="icon margin-right-xxs" viewBox="0 0 32 32" aria-hidden="true"><g stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" stroke="currentColor" fill="none" stroke-miterlimit="10"><path d="M16,20.644A6.968,6.968,0,0,1,13.1,18.9h0a7,7,0,0,1,0-9.9l4.95-4.95a7,7,0,0,1,9.9,0h0a7,7,0,0,1,0,9.9L24.9,17"></path><path d="M16,11.356A6.968,6.968,0,0,1,18.9,13.1h0a7,7,0,0,1,0,9.9l-4.95,4.95a7,7,0,0,1-9.9,0h0a7,7,0,0,1,0-9.9L7.1,15"></path></g></svg>
    <span>Label</span>
  </div>
</div>