.svg-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--site-icon) center / contain no-repeat;
  mask: var(--site-icon) center / contain no-repeat;
}

.icon-download { --site-icon: url("assets/icons/download.svg"); }
.icon-warning { --site-icon: url("assets/icons/warning-triangle.svg"); }
.icon-cpu { --site-icon: url("assets/icons/computer-cpu.svg"); }
.icon-bell { --site-icon: url("assets/icons/bell-notification.svg"); }
.icon-globe { --site-icon: url("assets/icons/globe-shield.svg"); }
.icon-users { --site-icon: url("assets/icons/users-group.svg"); }
.icon-smartphone { --site-icon: url("assets/icons/smartphone-protection.svg"); }

.download-icon .svg-icon { width: 27px; height: 27px; }
.shield .svg-icon { width: 35px; height: 35px; }
.notice-icon .svg-icon { width: 21px; height: 21px; }
.card-icon .svg-icon { width: 24px; height: 24px; }