Switch On Off Icon With Hover Effects CSS

Switch On Off icon with hover effects CSS. The icons are worked as input checkboxes. This is the best way to put the clickable icon inside the HTML input field.

Clickable icons and hover effects CSS that is created by using CSS and HTML tricks. This switch-on-off toggle effect looks like mobile configuration icons where we can switch on or off any service with a click without going to more settings.

HTML

<!-- Input checkbox Fields -->
<input type="checkbox" id="icon1">
<input type="checkbox" id="icon2">
<input type="checkbox" id="icon3">
<input type="checkbox" id="icon4">
<input type="checkbox" id="icon5">
<input type="checkbox" id="icon6">

<!-- Switch On Off Icons List -->
<div class="icons-list">
    <ul>
        <li>
            <label class="fas fa-microphone" for="icon1"></label>
        </li>
        <li>
            <label class="fas fa-plane" for="icon2"></label>
        </li>
        <li>
            <label class="fas fa-clock" for="icon3"></label>
        </li>
        <li>
            <label class="fas fa-bell" for="icon4"></label>
        </li>
        <li>
            <label class="fas fa-wifi" for="icon5"></label>
        </li>
        <li>
            <label class="fas fa-camera" for="icon6"></label>
        </li>
    </ul>
</div>

CSS

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
}
input {
    display: none;
}
.icons-list ul li {
    list-style: none;
    width: 50%;
    float: left;
    text-align: center;
}
.icons-list ul li label {
    cursor: pointer;
    margin: 10px 25px;
    color: #ddd;
    background-color: #585858;
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 22px;
    border-radius: 50%;
    transition: all 0.4s;
    opacity: 0.4;
}
.icons-list label:hover {
    color: #ddd;
    background-color: #333;
    font-size: 34px;
    opacity: 1;
}

#icon1:checked ~ .icons-list ul li .fa-microphone,
#icon2:checked ~ .icons-list ul li .fa-plane,
#icon3:checked ~ .icons-list ul li .fa-clock,
#icon4:checked ~ .icons-list ul li .fa-bell,
#icon5:checked ~ .icons-list ul li .fa-wifi,
#icon6:checked ~ .icons-list ul li .fa-camera {
    color: #fff;
    font-size: 30px;
    opacity: 1;
}