.m-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
}
.m-icon.mask{
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: currentColor;
}
.m-icon.mask-plain{
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.m-icon.icon-bg{
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-14{
    width: 14px;
    height: 14px;
}
.icon-15{
    width: 15px;
    height: 15px;
}
.icon-16{
    width: 16px;
    height: 16px;
}
.icon-18{
    width: 18px;
    height: 18px;
}
.icon-20{
    width: 20px;
    height: 20px;
}
.icon-rotate-25{
    rotate: 25deg;
}
.icon-rotate-45{
    rotate: 45deg;
}
.icon-rotate-180{
    rotate: 180deg;
}


.icon-logo{
    background-image: url('svg/logo.svg');
}
.mask-logo{
    -webkit-mask-image: url('svg/logo.svg');
    mask-image: url('svg/logo.svg');
}

.icon-shield{
    background-image: url('svg/shield.svg');
}
.mask-shield{
    -webkit-mask-image: url('svg/shield.svg');
    mask-image: url('svg/shield.svg');
}

.icon-building{
    background-image: url('svg/building.svg');
}
.mask-building{
    -webkit-mask-image: url('svg/building.svg');
    mask-image: url('svg/building.svg');
}

.icon-email{
    background-image: url('svg/email.svg');
}
.mask-email{
    -webkit-mask-image: url('svg/email.svg');
    mask-image: url('svg/email.svg');
}

.icon-lock{
    background-image: url('svg/lock.svg');
}
.mask-lock{
    -webkit-mask-image: url('svg/lock.svg');
    mask-image: url('svg/lock.svg');
}

.icon-login{
    background-image: url('svg/login.svg');
}
.mask-login{
    -webkit-mask-image: url('svg/login.svg');
    mask-image: url('svg/login.svg');
}

.icon-profile-checked{
    background-image: url('svg/profile-checked.svg');
}
.mask-profile-checked{
    -webkit-mask-image: url('svg/profile-checked.svg');
    mask-image: url('svg/profile-checked.svg');
}

.icon-cresent-moon{
    background-image: url('svg/cresent-moon.svg');
}
.mask-cresent-moon{
    -webkit-mask-image: url('svg/cresent-moon.svg');
    mask-image: url('svg/cresent-moon.svg');
}

.icon-sun{
    background-image: url('svg/sun.svg');
}
.mask-sun{
    -webkit-mask-image: url('svg/sun.svg');
    mask-image: url('svg/sun.svg');
}

.icon-system{
    background-image: url('svg/system.svg');
}
.mask-system{
    -webkit-mask-image: url('svg/system.svg');
    mask-image: url('svg/system.svg');
}

.icon-edit{
    background-image: url('svg/edit.svg');
}
.mask-edit{
    -webkit-mask-image: url('svg/edit.svg');
    mask-image: url('svg/edit.svg');
}

.icon-delete{
    background-image: url('svg/delete.svg');
}
.mask-delete{
    -webkit-mask-image: url('svg/delete.svg');
    mask-image: url('svg/delete.svg');
}

.icon-key{
    background-image: url('svg/key.svg');
}
.mask-key{
    -webkit-mask-image: url('svg/key.svg');
    mask-image: url('svg/key.svg');
}