MachinaCore

Source code

Last updates

Example 1
Change deprecated html tags to text decoration classes (#29604)
Example 2
justify-content:between ⇒ justify-content:space-between (#29734)
Example 3
Update change-version.js (#29736)
Example 4
Regenerate package-lock.json (#29730)
Bob the Bot
UI Designer
Set status Profile & account Feedback
Settings Logout

Documentation

MachinaCore Icons

All icons come from the MachinaCore Icons set and are MIT-licensed. Visit machinacore.com, download any of the 2052 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://machinacore.com/i/circle -->
    <!-- SVG icon code -->
  </span>
  <span class="switch-icon-b text-blue">
    <!-- Download SVG icon from http://machinacore.com/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://machinacore.com/i/circle -->
    <!-- SVG icon code -->
  </span>
  <span class="switch-icon-b text-blue">
    <!-- Download SVG icon from http://machinacore.com/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://machinacore.com/i/heart -->
    <!-- SVG icon code -->
  </span>
  <span class="switch-icon-b text-red">
    <!-- Download SVG icon from http://machinacore.com/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://machinacore.com/i/star -->
    <!-- SVG icon code -->
  </span>
  <span class="switch-icon-b text-yellow">
    <!-- Download SVG icon from http://machinacore.com/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://machinacore.com/i/thumb-up -->
    <!-- SVG icon code -->
  </span>
  <span class="switch-icon-b text-facebook">
    <!-- Download SVG icon from http://machinacore.com/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://machinacore.com/i/brand-twitter -->
    <!-- SVG icon code -->
  </span>
  <span class="switch-icon-b text-twitter">
    <!-- Download SVG icon from http://machinacore.com/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://machinacore.com/i/check -->
    <!-- SVG icon code -->
  </span>
  <span class="switch-icon-b text-red">
    <!-- Download SVG icon from http://machinacore.com/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://machinacore.com/i/arrow-down -->
    <!-- SVG icon code -->
  </span>
  <span class="switch-icon-b text-muted">
    <!-- Download SVG icon from http://machinacore.com/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://machinacore.com/i/car -->
    <!-- SVG icon code -->
  </span>
  <span class="switch-icon-b text-muted">
    <!-- Download SVG icon from http://machinacore.com/i/scooter -->
    <!-- SVG icon code -->
  </span>
</button>