Icon Toggles

Icon toggles are customized checkboxes to use with icon toggles. Icon toggles are much useful when you have icon toggle elements such as favourites, thumbs ups, thumbs downs etc.

Page Demo

Default state

<div class="icon-toggle">
    <input type="checkbox">
    <i class="zwicon-flag"></i>
</div>

<div class="icon-toggle">
    <input type="checkbox">
    <i class="zwicon-heart"></i>
</div>

<div class="icon-toggle">
    <input type="checkbox">
    <i class="zwicon-thumbs-up"></i>
</div>

<div class="icon-toggle">
    <input type="checkbox">
    <i class="zwicon-thumbs-down"></i>
</div>

<div class="icon-toggle">
    <input type="checkbox">
    <i class="zwicon-checkmark-circle"></i>
</div>

Checked (Active) state

<div class="icon-toggle">
    <input type="checkbox" checked>
    <i class="zwicon-flag"></i>
</div>

<div class="icon-toggle">
    <input type="checkbox" checked>
    <i class="zwicon-heart"></i>
</div>

<div class="icon-toggle">
    <input type="checkbox" checked>
    <i class="zwicon-thumbs-up"></i>
</div>

<div class="icon-toggle">
    <input type="checkbox" checked>
    <i class="zwicon-thumbs-down"></i>
</div>

<div class="icon-toggle">
    <input type="checkbox" checked>
    <i class="zwicon-checkmark-circle"></i>
</div>
Files required:
Type Files
Custom SCSS /src/scss/inc/_custom-forms.scss