.icon {
    width: 16px;
    height: 16px;
    mask-size: 16px 16px;
    mask-position: center;
    mask-repeat: no-repeat;
    background-color: currentColor;
}

    .icon.icon-login {
        -webkit-mask-image: url("../images/icons/login.svg");
        mask-image: url("../images/icons/login.svg");
    }

    .icon.icon-menu {
        -webkit-mask-image: url("../images/icons/menu.svg");
        mask-image: url("../images/icons/menu.svg");
    }

    .icon.icon-home {
        -webkit-mask-image: url("../images/icons/home.svg");
        mask-image: url("../images/icons/home.svg");
    }

    .icon.icon-table-edit {
        -webkit-mask-image: url("../images/icons/table-edit.svg");
        mask-image: url("../images/icons/table-edit.svg");
    }

    .icon.icon-logout {
        -webkit-mask-image: url("../images/icons/logout.svg");
        mask-image: url("../images/icons/logout.svg");
    }

    .icon.icon-search {
        -webkit-mask-image: url("../images/icons/search.svg");
        mask-image: url("../images/icons/search.svg");
    }

    .icon.icon-save {
        -webkit-mask-image: url("../images/icons/save.svg");
        mask-image: url("../images/icons/save.svg");
    }

    .icon.icon-delete {
        -webkit-mask-image: url("../images/icons/delete.svg");
        mask-image: url("../images/icons/delete.svg");
    }

    .icon.icon-print {
        -webkit-mask-image: url("../images/icons/print.svg");
        mask-image: url("../images/icons/print.svg");
    }

    .icon.icon-export {
        -webkit-mask-image: url("../images/icons/export.svg");
        mask-image: url("../images/icons/export.svg");
    }

    .icon.icon-send-report {
        -webkit-mask-image: url("../images/icons/send-report.svg");
        mask-image: url("../images/icons/send-report.svg");
    }

    .icon.icon-eye {
        -webkit-mask-image: url("../images/icons/eye.svg");
        mask-image: url("../images/icons/eye.svg");
    }

    .icon.icon-back {
        -webkit-mask-image: url("../images/icons/back.svg");
        mask-image: url("../images/icons/back.svg");
    }

    .icon.icon-sync {
        -webkit-mask-image: url("../images/icons/sync.svg");
        mask-image: url("../images/icons/sync.svg");
    }

    .icon.icon-import {
        -webkit-mask-image: url("../images/icons/import.svg");
        mask-image: url("../images/icons/import.svg");
    }

    .icon.icon-mail {
        -webkit-mask-image: url("../images/icons/mail.svg");
        mask-image: url("../images/icons/mail.svg");
    }

    .icon.icon-clock {
        -webkit-mask-image: url("../images/icons/clock.svg");
        mask-image: url("../images/icons/clock.svg");
    }

    .icon.icon-setting {
        -webkit-mask-image: url("../images/icons/setting.svg");
        mask-image: url("../images/icons/setting.svg");
    }

    .icon.icon-avatar {
        -webkit-mask-image: url("../images/icons/avatar.svg");
        mask-image: url("../images/icons/avatar.svg");
    }

    .icon.icon-arrow-right {
        -webkit-mask-image: url("../images/icons/arrow-right.svg");
        mask-image: url("../images/icons/arrow-right.svg");
    }

    .icon.icon-category {
        -webkit-mask-image: url("../images/icons/category.svg");
        mask-image: url("../images/icons/category.svg");
    }

    .icon.icon-plan {
        -webkit-mask-image: url("../images/icons/plan.svg");
        mask-image: url("../images/icons/plan.svg");
    }

    .icon.icon-finance {
        -webkit-mask-image: url("../images/icons/finance.svg");
        mask-image: url("../images/icons/finance.svg");
    }

    .icon.icon-manage {
        -webkit-mask-image: url("../images/icons/manage.svg");
        mask-image: url("../images/icons/manage.svg");
    }

    .icon.icon-book {
        -webkit-mask-image: url("../images/icons/book.svg");
        mask-image: url("../images/icons/book.svg");
    }

    .icon.icon-report {
        -webkit-mask-image: url("../images/icons/report.svg");
        mask-image: url("../images/icons/report.svg");
    }

    .icon.icon-question{
        -webkit-mask-image: url("../images/icons/question.svg");
        mask-image: url("../images/icons/question.svg");
    }

    .icon.icon-plus {
        -webkit-mask-image: url("../images/icons/plus.svg");
        mask-image: url("../images/icons/plus.svg");
    }

    .icon.icon-undo {
        -webkit-mask-image: url("../images/icons/undo.svg");
        mask-image: url("../images/icons/undo.svg");
    }

    .icon.icon-login {
        -webkit-mask-image: url("../images/icons/login.svg");
        mask-image: url("../images/icons/login.svg");
    }

    .icon.icon-key {
        -webkit-mask-image: url("../images/icons/key.svg");
        mask-image: url("../images/icons/key.svg");
    }

    .icon.icon-menu {
        -webkit-mask-image: url("../images/icons/menu.svg");
        mask-image: url("../images/icons/menu.svg");
    }

    .icon.icon-home {
        -webkit-mask-image: url("../images/icons/home.svg");
        mask-image: url("../images/icons/home.svg");
    }

    .icon.icon-table-edit {
        -webkit-mask-image: url("../images/icons/table-edit.svg");
        mask-image: url("../images/icons/table-edit.svg");
    }

    .icon.icon-logout {
        -webkit-mask-image: url("../images/icons/logout.svg");
        mask-image: url("../images/icons/logout.svg");
    }

    .icon.icon-search {
        -webkit-mask-image: url("../images/icons/search.svg");
        mask-image: url("../images/icons/search.svg");
    }

    .icon.icon-save {
        -webkit-mask-image: url("../images/icons/save.svg");
        mask-image: url("../images/icons/save.svg");
    }

    .icon.icon-connect {
        -webkit-mask-image: url("../images/icons/connect.svg");
        mask-image: url("../images/icons/connect.svg");
    }

    .icon.icon-disconnect {
        -webkit-mask-image: url("../images/icons/disconnect.svg");
        mask-image: url("../images/icons/disconnect.svg");
    }

    .icon.icon-plus {
        -webkit-mask-image: url("../images/icons/plus.svg");
        mask-image: url("../images/icons/plus.svg");
    }

    .icon.icon-edit {
        -webkit-mask-image: url("../images/icons/edit.svg");
        mask-image: url("../images/icons/edit.svg");
    }

    .icon.icon-check {
        -webkit-mask-image: url("../images/icons/check.svg");
        mask-image: url("../images/icons/check.svg");
    }

    .icon.icon-check-circle {
        -webkit-mask-image: url("../images/icons/check-circle.svg");
        mask-image: url("../images/icons/check-circle.svg");
    }

    .icon.icon-undo {
        -webkit-mask-image: url("../images/icons/undo.svg");
        mask-image: url("../images/icons/undo.svg");
    }

    .icon.icon-check-mark-notepad {
        -webkit-mask-image: url("../images/icons/check-mark-notepad.svg");
        mask-image: url("../images/icons/check-mark-notepad.svg");
    }

    .icon.icon-refresh {
        -webkit-mask-image: url("../images/icons/refresh.svg");
        mask-image: url("../images/icons/refresh.svg");
    }

    .icon.icon-close {
        -webkit-mask-image: url("../images/icons/close.svg");
        mask-image: url("../images/icons/close.svg");
    }

    .icon.icon-loading {
        -webkit-mask-image: url("../images/icons/loading.svg");
        mask-image: url("../images/icons/loading.svg");
    }

    .icon.icon-refuse {
        -webkit-mask-image: url("../images/icons/refuse.svg");
        mask-image: url("../images/icons/refuse.svg");
    }

    .icon.icon-eye {
        -webkit-mask-image: url("../images/icons/eye.svg");
        mask-image: url("../images/icons/eye.svg");
    }

    .icon.icon-send {
        -webkit-mask-image: url("../images/icons/send.svg");
        mask-image: url("../images/icons/send.svg");
    }

    .icon.icon-sync {
        -webkit-mask-image: url("../images/icons/sync.svg");
        mask-image: url("../images/icons/sync.svg");
    }

    .icon.icon-download {
        -webkit-mask-image: url("../images/icons/download.svg");
        mask-image: url("../images/icons/download.svg");
    }

    .icon.icon-restart {
        -webkit-mask-image: url("../images/icons/restart.svg");
        mask-image: url("../images/icons/restart.svg");
    }

    .icon.icon-upload {
        -webkit-mask-image: url("../images/icons/upload.svg");
        mask-image: url("../images/icons/upload.svg");
    }

    .icon.icon-report {
        -webkit-mask-image: url("../images/icons/report.svg");
        mask-image: url("../images/icons/report.svg");
    }

    .icon.icon-hierarchy {
        -webkit-mask-image: url("../images/icons/hierarchy.svg");
        mask-image: url("../images/icons/hierarchy.svg");
    }

    .icon.icon-pdf {
        -webkit-mask-image: url("../images/icons/pdf.svg");
        mask-image: url("../images/icons/pdf.svg");
    }

    .icon.icon-word {
        -webkit-mask-image: url("../images/icons/word.svg");
        mask-image: url("../images/icons/word.svg");
    }

    .icon.icon-excel {
        -webkit-mask-image: url("../images/icons/excel.svg");
        mask-image: url("../images/icons/excel.svg");
    }

    .icon.icon-png {
        -webkit-mask-image: url("../images/icons/png.svg");
        mask-image: url("../images/icons/png.svg");
    }

    .icon.icon-folder {
        -webkit-mask-image: url("../images/icons/folder.svg");
        mask-image: url("../images/icons/folder.svg");
    }

    .icon.icon-clock {
        -webkit-mask-image: url("../images/icons/clock.svg");
        mask-image: url("../images/icons/clock.svg");
    }

    .icon.icon-star {
        -webkit-mask-image: url("../images/icons/star.svg");
        mask-image: url("../images/icons/star.svg");
    }

    .icon.icon-trash {
        -webkit-mask-image: url("../images/icons/trash.svg");
        mask-image: url("../images/icons/trash.svg");
    }


    .icon.icon-house {
        -webkit-mask-image: url("../images/icons/house.svg");
        mask-image: url("../images/icons/house.svg");
    }
    .icon.icon-recovery {
        -webkit-mask-image: url("../images/icons/recovery.svg");
        mask-image: url("../images/icons/recovery.svg");
    }
    .icon.restore {
        -webkit-mask-image: url("../images/icons/restore.svg");
        mask-image: url("../images/icons/restore.svg");
    }
    .icon.icon-backup {
        -webkit-mask-image: url("../images/backup_11536966.png");
        mask-image: url("../images/backup_11536966.png");
    }