Tabler

Source code Sponsor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
Paweł Kuna
UI Designer
Set status Profile & account Feedback
Settings Logout

Documentation

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>