carbon-components/html/content-switcher/content-switcher--with-icon.html

Carbon Components is a component library for IBM Cloud

<div data-content-switcher class="bx--content-switcher" role="tablist" aria-label="Demo switch content">
    <button class="bx--content-switcher-btn bx--content-switcher--selected" data-target=".demo--panel--opt-1" role="tab" aria-selected="true">
      <svg class="bx--content-switcher__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
      </svg>
       First section
    </button>
    <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-2" role="tab">
      <svg class="bx--content-switcher__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
      </svg>
       Second section
    </button>
    <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-3" role="tab">
      <svg class="bx--content-switcher__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
      </svg>
       Third section
    </button>
</div>