Индивидуальный дизайн флажка

Question

Мне нужно сделать индивидуальный дизайн для флажка. Итак, есть 3 состояния:

1. отключено: border: 1px solid #EDEEF0; border-radius: 2px; box-sizing: border-box;
2. hover / active: border: 1px solid #E0431E; border-radius: 2px; box-sizing: border-box;
3. Проверено: border: 1px solid #E0431E; border-radius: 2px; box-sizing: border-box; + настраиваемая галочка, которую я сделал .svg.

Моя проблема - я не могу вставить значок .svg с изменяющейся границей флажка. Изменяет или галочку, или границу. Как я могу это решить? Как добавить рамку и контрольную отметку?

#check{
        display: none;
}

.hiddenSpan{
    content:'';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #EDEEF0;
    border-radius: 2px;
    box-sizing: border-box;
    position: relative;

}


input[type="checkbox"]:checked + .hiddenSpan:before{
    content:url(checkmark.svg);
    background-repeat: no-repeat;
    position: absolute;
    top: -3px;
    left: 1px;
}

<label for="check" id="checkLabel">
                            <input type="checkbox" id="check" class="input__section__footer-checkbox" required>
                            <span class="hiddenSpan"></span></label>