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">
    <!-- SVG icon code -->
  </span>
  <span class="switch-icon-b text-blue">
    <!-- 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">
    <!-- SVG icon code -->
  </span>
  <span class="switch-icon-b text-blue">
    <!-- 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">
    <!-- SVG icon code -->
  </span>
  <span class="switch-icon-b text-red">
    <!-- 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">
    <!-- SVG icon code -->
  </span>
  <span class="switch-icon-b text-yellow">
    <!-- 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">
    <!-- SVG icon code -->
  </span>
  <span class="switch-icon-b text-facebook">
    <!-- 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">
    <!-- SVG icon code -->
  </span>
  <span class="switch-icon-b text-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">
    <!-- SVG icon code -->
  </span>
  <span class="switch-icon-b text-red">
    <!-- 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">
    <!-- SVG icon code -->
  </span>
  <span class="switch-icon-b text-muted">
    <!-- 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">
    <!-- SVG icon code -->
  </span>
  <span class="switch-icon-b text-muted">
    <!-- SVG icon code -->
  </span>
</button>