Svg icons

https://pn.com.ua/

by Andrey Izman

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none"><symbol id="icon-38" viewBox="-2 -2 50 50">
    <path d="M35.8.5A12 12 0 0 0 25 6.7C23 3 18.8.5 14.2.5 6.9.5-2.8 6.3 1.6 22.3c4.7 14.5 21 23.5 23.2 24.7 10.5-7.7 20-14.8 23.6-24.7C52.8 6.3 43 .5 35.8.5z"></path></symbol>

    <symbol id="icon-checkbox-default" viewBox="2 2 20 20">
        <path d="M19 5v14H5V5h14m0-2H5C4 3 3 4 3 5v14c0 1 1 2 2 2h14c1 0 2-1 2-2V5c0-1-1-2-2-2z"></path><path d="M0 0h24v24H0z" fill="none" data-darkreader-inline-fill="" style="--darkreader-inline-fill:none;"></path>
    </symbol>

<symbol id="icon-checkbox-checked" viewBox="2 2 20 20">
    <path d="M0 0h24v24H0z" fill="none" data-darkreader-inline-fill="" style="--darkreader-inline-fill:none;"></path><path d="M19 3H5C4 3 3 4 3 5v14c0 1 1 2 2 2h14c1 0 2-1 2-2V5c0-1-1-2-2-2zm-9 14l-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z"></path>
</symbol>

<symbol id="icon-60" viewBox="0 0 50 49.91967">
    <path d="M22.04 49.79c-4.54-.6-8.55-2.21-12.11-4.87-1.2-.9-3.42-3.03-4.4-4.24a25.11 25.11 0 0 1-3.06-26.6 24 24 0 0 1 4.98-6.92A24.59 24.59 0 0 1 21.12.23c1.87-.33 6.18-.3 8.1.05 5.18.96 9.5 3.16 13.17 6.71a25 25 0 0 1-13.17 42.6c-2 .34-5.35.44-7.18.2zm5.33-3.85c4.4-.51 8.36-2.26 11.6-5.12a21.19 21.19 0 0 0 3.96-27.07 20.97 20.97 0 0 0-8.45-7.68 19.85 19.85 0 0 0-7.77-2.19 21.06 21.06 0 0 0-16.48 5.94 21.13 21.13 0 0 0-1.87 28.2 21.55 21.55 0 0 0 11.39 7.4c2.65.67 5 .83 7.62.52zm-3.97-8.98a11.97 11.97 0 0 1-8.34-5.13c-1.08-1.62-1.26-2.57-.6-3.23.38-.37.75-.48 1.3-.38.5.1.8.41 1.26 1.33a8.68 8.68 0 0 0 7.93 4.61c1.8 0 2.8-.22 4.27-.94a9.84 9.84 0 0 0 3.7-3.56c.24-.45.54-.93.67-1.08.51-.57 1.56-.48 2.08.18.37.48.31 1.16-.2 2.12a11.62 11.62 0 0 1-9.94 6.14 15 15 0 0 1-2.13-.06zm-8.13-16.37c-1.02-.49-.59-2.82.74-4.02a4.04 4.04 0 0 1 5.47-.02 3.94 3.94 0 0 1 1.32 2.37c.1.55.1.78-.02 1.08-.17.42-.68.74-1.18.74-.42 0-1.05-.62-1.05-1.04 0-.18-.07-.5-.17-.73-.73-1.72-3.1-1.36-3.35.52-.14 1-.94 1.5-1.76...

CSS

svg.icon {
    fill: #828282;
    background-image: none !important;
    position: relative;
}

*:hover > svg.icon, .active svg.icon {
    fill: #666;
}

svg.icon-no-photo {
    width: 100%;
    height: 100px;
    fill: #e6e6e6 !important;
}

svg.icon-no-photo.catalog-list-photo {
    height: 70px;
    width: 70px;
    fill: #eee !important;
    margin: 30px 0;
}

.product-description-small .img svg.icon-no-photo {
    width: 40px;
    height: 40px;
    text-align: center;
}

.scroll-gallery svg.icon-no-photo {
    width: 100%;
    height: 50px;
}

svg.icon-checkbox-default,
svg.icon-checkbox-checked,
svg.icon-radio-default,
svg.icon-radio-checked {
    fill: #666;
    width: 20px;
    height: 20px;
    top: -1px;
    vertical-align: middle;
    margin-right: 2px;
    position: absolute;
    left: 0;
    display: none;
}

svg.icon-radio-default,
svg.icon-radio-checked {
    width: 15px;
    height: 15px;
    fill: #999;
    top: -2px;
}

svg.icon-1 {
    width: 17px;
    height: 17px;
    /*vertical-align: middle;*/
}


svg.icon-3 {
    width: 11px;
    height: 18px;
    /*vertical-align: middle;*/
}

svg.icon-5 {
    width: 15px;
    height: 16px;
}

svg.icon-6 {
    width: 19px;
    height: 19px;
}

svg.icon-7 {
    width: 16px;
    height: 16px;
}

svg.icon-8 {
    width: 22px;
    height: 20px;
}

svg.icon-9 {
    width: 22px;
    height: 20px;
}

svg.icon-10 {
    width: 22px;
    height: 20px;
}

svg.icon-11 {
    width: 22px;
    height: 20px;
}

a:not([href]) > svg.icon-8,
a:not([href]) > svg.icon-9,
a:not([href]) > svg.icon-10,
a:not([href]) > svg.icon-11 {
    fill: #000000;
}

svg.icon-12 {
    width: 17px;
    height: 16px;
}

svg.icon-13 {
    width: 19px;
    height: 18px;
    margin-right: 6px;
    fill: #ff6862;
}

.close svg.icon-13 {
    vertical-align: middle;
    top: -1px;
    margin-right: 2px;
}

*:hover > svg.icon-13 {
    fill: #ff6862 !important;
}


.disabled svg.icon-13,
.disabled:hover svg.icon-13 {
    fill: #cccccc...