Here's a solution for implementing tab navigation where icons change state along with their corresponding tabs. The example demonstrates a three-tab system with accompanying icons.

<div class="tab-container">
    <div id="tab-navigation" class="tab-nav">
        <p class="tab-item active"><span class="tab-icon water-icon"></span>Water Resources</p>
        <p class="tab-item"><span class="tab-icon power-icon"></span>Power Grid</p>
        <p class="tab-item"><span class="tab-icon farm-icon"></span>Farmland</p>
    </div>
    <div id="tab-content" class="tab-panels">
        <div>Water Resources Content</div>
        <div style="display: none">Power Grid Content</div>
        <div style="display: none">Farmland Content</div>
    </div>
</div>

CSS ImplementationThe key CSS handles both the tab styling and icon state changes:

.tab-container {
    display: flex;
    justify-content: space-between;
}
.tab-nav {
    width: 230px;
}
.tab-item {
    width: 230px;
    height: 52px;
    line-height: 52px;
    padding-left: 52px;
    background: linear-gradient(210deg, #F1F8FF, #FFFFFF);
    box-shadow: 0px 1px 30px 0px rgba(193,203,221,0.4);
    border-radius: 8px;
    margin-bottom: 5px;
    font-size: 16px;
    cursor: pointer;
}
.tab-item span {
    display: inline-block;
    width: 25px;
    height: 20px;
    margin-right: 21px;
}
.active {
    color: #FFFFFF;
    font-weight: bold;
    background: linear-gradient(90deg, #1F8BFA, #2163FA);
}
.tab-icon {
    background-image: url("../img/icons-sprite.png");
    vertical-align: middle;
}
.water-icon {
    background-position: 0 0;
}
.active .water-icon {
    background-position: 25px 0;
}
.power-icon {
    background-position: 0 -20px;
}
.active .power-icon {
    background-position: 25px -20px;
}
.farm-icon {
    background-position: 0 -40px;
}
.active .farm-icon {
    background-position: 25px -40px;
}

jQuery ImplementationThe JavaScript handles tab switching and icon updates:

$(function() {
    $("#tab-navigation > .tab-item").each(function() {
        $(this).click(function() {
            $(".tab-item").removeClass("active");
            $(this).addClass("active");
            var tabIndex = $(this).index();
            $("#tab-content > div").hide().eq(tabIndex).show();
        });
    });
});