1. Home
  2. New components
  3. Switches

Switches

Contents

3D Switch

                    
<label class="switch switch-3d switch-primary">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-3d switch-secondary">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-3d switch-success">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-3d switch-warning">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-3d switch-info">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-3d switch-danger">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>

Switch default

                    
<label class="switch switch-default switch-primary">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-secondary">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-success">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-warning">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-info">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-danger">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>

Switch default - pills

                    
<label class="switch switch-default switch-pill switch-primary">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-pill switch-secondary">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-pill switch-success">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-pill switch-warning">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-pill switch-info">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-pill switch-danger">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>

Switch outline

                    
<label class="switch switch-default switch-primary-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-secondary-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-success-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-warning-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-info-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-danger-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>

Switch outline - pills

                    
<label class="switch switch-default switch-pill switch-primary-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-pill switch-secondary-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-pill switch-success-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-pill switch-warning-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-pill switch-info-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-pill switch-danger-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>

Switch outline alternative

                    
<label class="switch switch-default switch-primary-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-secondary-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-success-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-warning-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-info-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-danger-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>

Switch outline alternative - pills

                    
<label class="switch switch-default switch-pill switch-primary-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-pill switch-secondary-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-pill switch-success-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-pill switch-warning-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-pill switch-info-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-default switch-pill switch-danger-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>

Switch with text

                    
<label class="switch switch-text switch-primary">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-secondary">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-success">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-warning">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-info">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-danger">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>

Switch with text - pills

                    
<label class="switch switch-text switch-pill switch-primary">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-pill switch-secondary">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-pill switch-success">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-pill switch-warning">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-pill switch-info">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-pill switch-danger">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>

Switch with text outline

                    
<label class="switch switch-text switch-primary-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-secondary-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-success-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-warning-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-info-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-danger-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>

Switch with text outline - pills

                    
<label class="switch switch-text switch-pill switch-primary-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-pill switch-secondary-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-pill switch-success-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-pill switch-warning-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-pill switch-info-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-pill switch-danger-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>

Switch with text outline alternative

                    
<label class="switch switch-text switch-primary-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-secondary-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-success-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-warning-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-info-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-danger-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>

Switch with text outline alternative - pills

                    
<label class="switch switch-text switch-pill switch-primary-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-pill switch-secondary-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-pill switch-success-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-pill switch-warning-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-pill switch-info-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-text switch-pill switch-danger-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="On" data-off="Off"></span>
    <span class="switch-handle"></span>
</label>

Switch with icon

                    
<label class="switch switch-icon switch-primary">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-secondary">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-success">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-warning">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-info">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-danger">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>

Switch with icon - pills

                    
<label class="switch switch-icon switch-pill switch-primary">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-secondary">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-success">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-warning">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-info">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-danger">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>

Switch with icon outline

                    
<label class="switch switch-icon switch-primary-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-secondary-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-success-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-warning-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-info-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-danger-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>

Switch with icon outline - pills

                    
<label class="switch switch-icon switch-pill switch-primary-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-secondary-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-success-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-warning-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-info-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-danger-outline">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>

Switch with icon outline alternative

                    
<label class="switch switch-icon switch-primary-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-secondary-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-success-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-warning-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-info-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-danger-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>

Switch with icon outline alternative - pills

                    
<label class="switch switch-icon switch-pill switch-primary-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-secondary-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-success-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-warning-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-info-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-icon switch-pill switch-danger-outline-alt">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
    <span class="switch-handle"></span>
</label>

Switch sizes

            
<label class="switch switch-lg switch-3d switch-primary">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-3d switch-primary">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-sm switch-3d switch-primary">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>
&nbsp;&nbsp;&nbsp;
<label class="switch switch-xs switch-3d switch-primary">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label"></span>
    <span class="switch-handle"></span>
</label>