.icon {
    width: 1rem;
    height: 1rem;
    background-color: currentcolor;
    -webkit-mask-image: var(--icon-mask-image);
    mask-image: var(--icon-mask-image);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.icon-back {
    --icon-mask-image: url("/images/back.svg");
}
.icon-close {
    --icon-mask-image: url("/images/close.svg");
}
.icon-demos,
.demos-icon {
    --icon-mask-image: url("/images/demos.svg");
}
.icon-docs,
.docs-icon {
    --icon-mask-image: url("/images/doc.svg");
}
.icon-menu {
    --icon-mask-image: url("/images/menu.svg");
}
.icon-user,
.user-icon {
    --icon-mask-image: url("/images/user.svg");
}
.icon-log-in,
.log-in-icon {
    --icon-mask-image: url("/images/log-in.svg");
}
.icon-log-out,
.log-out-icon {
    --icon-mask-image: url("/images/log-out.svg");
}
.icon-settings,
.settings-icon {
    --icon-mask-image: url("/images/settings.svg");
}
.icon-calendar {
    --icon-mask-image: url("/images/calendar.svg");
}

/* pages */
.icon-counter {
    --icon-mask-image: url("/images/pages/counter.svg");
}
.icon-home {
    --icon-mask-image: url("/images/pages/home.svg");
}
.icon-weather {
    --icon-mask-image: url("/images/pages/weather.svg");
}