.icon {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    overflow: hidden;
    line-height: 1;
    vertical-align: middle;
}

    .icon:before {
        content: "";
        position: absolute;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        width: 15px;
        height: 15px;
        left: 0;
        top: 0;
    }

    .icon.icon-1xs,
    .icon.icon-1xs:before {
        width: 10px;
        height: 10px;
    }

    .icon.icon-1x,
    .icon.icon-1x:before {
        width: 20px;
        height: 20px;
    }

    .icon.icon-2x,
    .icon.icon-2x:before {
        width: 24px;
        height: 24px;
    }

    .icon.icon-3x,
    .icon.icon-3x:before {
        width: 28px;
        height: 28px;
    }

        .icon.icon-4x,
        .icon.icon-4x:before {
            width: 30px;
            height: 30px;
        }

    .icon.icon-social,
    .icon.icon-social:before {
        width: 20px;
        height: 20px;
    }

    .icon.icon-chevron-up:before {
        background-image: url('../svg/regular/chevron-up.svg');
    }

    .icon.icon-chevron-down:before {
        background-image: url('../svg/regular/chevron-down.svg');
    }

    .icon.icon-chevron-left:before {
        background-image: url('../svg/regular/chevron-left.svg');
    }

    .icon.icon-chevron-right:before {
        background-image: url('../svg/regular/chevron-right.svg');
    }

    .icon.icon-arrow-left:before {
        background-image: url('../svg/regular/arrow-left.svg');
    }

    .icon.icon-arrow-right:before {
        background-image: url('../svg/regular/arrow-right.svg');
    }

    .icon.icon-arrow-down:before {
        background-image: url('../svg/regular/arrow-down.svg');
    }

    .icon.icon-arrow-up:before {
        background-image: url('../svg/regular/arrow-up.svg');
    }

    .icon.icon-search:before {
        background-image: url('../svg/regular/search.svg');
    }

    .icon.icon-search-white:before {
        background-image: url('../svg/regular/search-white.svg');
    }

    .icon.icon-magnifier:before {
        background-image: url('../svg/regular/magnifier.svg');
    }

    .icon.icon-menu:before {
        background-image: url('../svg/regular/menu.svg');
    }

    .icon.icon-cross:before {
        background-image: url('../svg/regular/cross.svg');
    }

    .icon.icon-close:before {
        background-image: url('../svg/regular/cross.svg');
    }

    .icon.icon-facebook:before {
        background-image: url('../svg/social/facebook.svg');
    }

    .icon.icon-instagram:before {
        background-image: url('../svg/social/instagram.svg');
    }

    .icon.icon-linkedin:before {
        background-image: url('../svg/social/linkedin.svg');
    }

    .icon.icon-twitter:before {
        background-image: url('../svg/social/twitter.svg');
    }