Switch icon - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.

## Documentation

### Tabler Icons

All icons come from the Tabler Icons set and are MIT-licensed. Visit tabler-icons.io, download any of the 1518 icons in SVG, PNG or React and use them in your favourite design tools.
Download icons

# Switch icon

The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version.

## Default markup

To replace the icons, all should add `active` class to the `switch-icon` component.

    <button class="switch-icon" data-bs-toggle="switch-icon">
      <span class="switch-icon-a text-muted">
        <!-- Download SVG icon from http://tabler-icons.io/i/circle -->
        <!-- SVG icon code -->
      </span>
      <span class="switch-icon-b text-blue">
        <!-- Download SVG icon from http://tabler-icons.io/i/square -->
        <!-- SVG icon code -->
      </span>
    </button>

## Switch animations

You can also add a fancy animation to add variety to your button. See demo below:

    <button class="switch-icon" data-bs-toggle="switch-icon">
      <span class="switch-icon-a text-muted">
        <!-- Download SVG icon from http://tabler-icons.io/i/circle -->
        <!-- SVG icon code -->
      </span>
      <span class="switch-icon-b text-blue">
        <!-- Download SVG icon from http://tabler-icons.io/i/circle -->
        <!-- SVG icon code with class="icon-filled" -->
      </span>
    </button>
    <button class="switch-icon switch-icon-fade" data-bs-toggle="switch-icon">
      <span class="switch-icon-a text-muted">
        <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
        <!-- SVG icon code -->
      </span>
      <span class="switch-icon-b text-red">
        <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
        <!-- SVG icon code with class="icon-filled" -->
      </span>
    </button>
    <button class="switch-icon switch-icon-scale" data-bs-toggle="switch-icon">
      <span class="switch-icon-a text-muted">
        <!-- Download SVG icon from http://tabler-icons.io/i/star -->
        <!-- SVG icon code -->
      </span>
      <span class="switch-icon-b text-yellow">
        <!-- Download SVG icon from http://tabler-icons.io/i/star -->
        <!-- SVG icon code with class="icon-filled" -->
      </span>
    </button>
    <button class="switch-icon switch-icon-flip" data-bs-toggle="switch-icon">
      <span class="switch-icon-a text-muted">
        <!-- Download SVG icon from http://tabler-icons.io/i/thumb-up -->
        <!-- SVG icon code -->
      </span>
      <span class="switch-icon-b text-facebook">
        <!-- Download SVG icon from http://tabler-icons.io/i/thumb-up -->
        <!-- SVG icon code -->
      </span>
    </button>
    <button class="switch-icon switch-icon-slide-up" data-bs-toggle="switch-icon">
      <span class="switch-icon-a text-muted">
        <!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter -->
        <!-- SVG icon code -->
      </span>
      <span class="switch-icon-b text-twitter">
        <!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter -->
        <!-- SVG icon code -->
      </span>
    </button>
    <button class="switch-icon switch-icon-slide-left" data-bs-toggle="switch-icon">
      <span class="switch-icon-a text-muted">
        <!-- Download SVG icon from http://tabler-icons.io/i/check -->
        <!-- SVG icon code -->
      </span>
      <span class="switch-icon-b text-red">
        <!-- Download SVG icon from http://tabler-icons.io/i/x -->
        <!-- SVG icon code -->
      </span>
    </button>
    <button class="switch-icon switch-icon-slide-down" data-bs-toggle="switch-icon">
      <span class="switch-icon-a text-muted">
        <!-- Download SVG icon from http://tabler-icons.io/i/arrow-down -->
        <!-- SVG icon code -->
      </span>
      <span class="switch-icon-b text-muted">
        <!-- Download SVG icon from http://tabler-icons.io/i/arrow-up -->
        <!-- SVG icon code -->
      </span>
    </button>
    <button class="switch-icon switch-icon-slide-right" data-bs-toggle="switch-icon">
      <span class="switch-icon-a text-muted">
        <!-- Download SVG icon from http://tabler-icons.io/i/car -->
        <!-- SVG icon code -->
      </span>
      <span class="switch-icon-b text-muted">
        <!-- Download SVG icon from http://tabler-icons.io/i/scooter -->
        <!-- SVG icon code -->
      </span>
    </button>