Icon Toggle

Combine 2 icons to toggle state. Interact with the icons below to toggle them on and off.

Click to toggle

Code Example

<div class="icon-toggle mr-5 left-30">
  <i class="zenicon-favorite-border icon-off show text-sm"></i>
  <i class="zenicon-favorite icon-on text-sm"></i>
</div>

<div class="icon-toggle ml-5">
  <i class="zenicon-add-circle-outline icon-off show text-sm"></i>
  <i class="zenicon-add-circle icon-on text-sm"></i>
</div>

Hover to toggle

Code Example

<a class="close text-sm"></a>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.