.icon {
  --icon-mask-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13.2 5.8 19.4 12l-6.2 6.2-1.4-1.4 3.8-3.8H4v-2h11.6l-3.8-3.8 1.4-1.4Z'/%3E%3C/svg%3E");
  --icon-mask-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.8 5.8 4.6 12l6.2 6.2 1.4-1.4-3.8-3.8H20v-2H8.4l3.8-3.8-1.4-1.4Z'/%3E%3C/svg%3E");
  --icon-mask-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m6.4 5 5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6 10.6 12 5 6.4 6.4 5Z'/%3E%3C/svg%3E");
  --icon-size: 1em;
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 auto;
  vertical-align: -0.14em;
  background-color: currentColor;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
}

.icon--sm { --icon-size: 0.95em; }
.icon--md { --icon-size: 1.1em; }
.icon--lg { --icon-size: 1.25em; }
.icon--xl { --icon-size: 1.5em; }

.icon-moon { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E"); }
.icon-sun { --icon-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='black'/%3E%3Cg stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 1v2'/%3E%3Cpath d='M12 21v2'/%3E%3Cpath d='M4.22 4.22l1.42 1.42'/%3E%3Cpath d='M18.36 18.36l1.42 1.42'/%3E%3Cpath d='M1 12h2'/%3E%3Cpath d='M21 12h2'/%3E%3Cpath d='M4.22 19.78l1.42-1.42'/%3E%3Cpath d='M18.36 5.64l1.42-1.42'/%3E%3C/g%3E%3C/svg%3E\"); }
.icon-phone { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8a15.5 15.5 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11 11 0 0 0 3.46.55 1 1 0 0 1 1 1V21a1 1 0 0 1-1 1A18 18 0 0 1 2 5a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.18.19 2.34.55 3.46a1 1 0 0 1-.24 1l-2.2 2.34Z'/%3E%3C/svg%3E"); }
.icon-mail { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2v.5l9 5.63 9-5.63V7H3Zm18 10V9.84l-8.48 5.3a1 1 0 0 1-1.04 0L3 9.84V17h18Z'/%3E%3C/svg%3E"); }
.icon-location { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22s7-6.7 7-12a7 7 0 1 0-14 0c0 5.3 7 12 7 12Zm0-9a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z'/%3E%3C/svg%3E"); }
.icon-alert { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 1 21h22L12 2Zm1 14h-2v-2h2v2Zm0-4h-2V8h2v4Z'/%3E%3C/svg%3E"); }
.icon-clock { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1.75A10.25 10.25 0 1 0 22.25 12 10.26 10.26 0 0 0 12 1.75Zm0 18.5A8.25 8.25 0 1 1 20.25 12 8.26 8.26 0 0 1 12 20.25Zm1-8.84 3.1 1.79-1 1.73-4.1-2.36V6h2v5.41Z'/%3E%3C/svg%3E"); }
.icon-church { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 2h2v3h3v2h-3v3h-2V7H8V5h3V2Zm-6 9 7-4 7 4v10h-5v-6h-4v6H5V11Z'/%3E%3C/svg%3E"); }
.icon-compass { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm3.9 6.1-2.5 6.4-6.4 2.5 2.5-6.4 6.4-2.5Zm-3.18 4.72a1 1 0 1 0-1.41-1.41 1 1 0 0 0 1.41 1.41Z'/%3E%3C/svg%3E"); }
.icon-card { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm0 4v10h16V8H4Zm3 6h5v2H7v-2Z'/%3E%3C/svg%3E"); }
.icon-mobile { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm5 18.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM7 5v11h10V5H7Z'/%3E%3C/svg%3E"); }
.icon-bank { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 2 8v2h20V8L12 3Zm-7 9h2v6H5v-6Zm4 0h2v6H9v-6Zm4 0h2v6h-2v-6Zm4 0h2v6h-2v-6ZM2 20h20v2H2v-2Z'/%3E%3C/svg%3E"); }
.icon-globe { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm6.92 9h-3.05a15.6 15.6 0 0 0-1.4-5.02A8.03 8.03 0 0 1 18.92 11ZM12 4.07c.8.96 1.84 3.08 2.42 6.93H9.58C10.16 7.15 11.2 5.03 12 4.07ZM4.08 13h3.05a15.6 15.6 0 0 0 1.4 5.02A8.03 8.03 0 0 1 4.08 13Zm3.05-2H4.08a8.03 8.03 0 0 1 4.45-5.02A15.6 15.6 0 0 0 7.13 11Zm4.87 8.93c-.8-.96-1.84-3.08-2.42-6.93h4.84c-.58 3.85-1.62 5.97-2.42 6.93ZM13 19.02A15.6 15.6 0 0 0 14.87 13h3.05A8.03 8.03 0 0 1 13 19.02Z'/%3E%3C/svg%3E"); }
.icon-leaf { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 3c-7.5.2-12.2 2.74-14.5 7.6-1.29 2.73-.92 5.4.14 7.4L3 21l1.41 1.41 2.95-2.64c1.5.68 3.2.92 4.9.63C18 19.43 21 14.2 21 4a1 1 0 0 0-1-1Zm-8.52 13.9a8.76 8.76 0 0 1-2.26-.12l6.84-6.23-1.35-1.48-6.82 6.2a6.3 6.3 0 0 1 .43-3.77c1.67-3.52 5-5.57 10.62-6.31-.18 7.44-2.08 10.76-7.46 11.71Z'/%3E%3C/svg%3E"); }
.icon-heart { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7.2-4.35-9.54-8.32C.19 8.83 2.06 4 6.56 4A5.63 5.63 0 0 1 12 7.09 5.63 5.63 0 0 1 17.44 4c4.5 0 6.37 4.83 4.1 8.68C19.2 16.65 12 21 12 21Z'/%3E%3C/svg%3E"); }
.icon-shirt { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m8 3 1.7 2h4.6L16 3l4 2.5L18.5 10H17v11H7V10H5.5L4 5.5 8 3Z'/%3E%3C/svg%3E"); }
.icon-child { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5.5' r='3' fill='black'/%3E%3Cpath fill='black' d='M10 9h4a3 3 0 0 1 3 3v3h-2v7h-2v-6h-2v6H9v-7H7v-3a3 3 0 0 1 3-3Z'/%3E%3C/svg%3E"); }
.icon-handshake { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 6 3 10l4 4 2.5-2.5L12 14a2 2 0 0 0 2.83 0l3.26-3.26a1.5 1.5 0 0 1 2.12 0L22 12.53l-1.41 1.41-1.67-1.67-2.68 2.68a4 4 0 0 1-5.66 0l-2.08-2.08L5.4 16 1 11.6 5.4 7.2 7 6Zm8-1 1.5 1.5L13 10H9l4-5h2Z'/%3E%3C/svg%3E"); }
.icon-lock { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 9h-1V7a4 4 0 1 0-8 0v2H7a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2Zm-7-2a2 2 0 1 1 4 0v2h-4V7Zm3 8.73V18h-2v-2.27a2 2 0 1 1 2 0Z'/%3E%3C/svg%3E"); }
.icon-signal { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 20h2v-4H3v4Zm4 0h2v-7H7v7Zm4 0h2v-10h-2v10Zm4 0h2V7h-2v13Zm4 0h2V4h-2v16Z'/%3E%3C/svg%3E"); }
.icon-clipboard { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 2h6a2 2 0 0 1 2 2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2-2Zm0 4H5v14h14V6h-4v1H9V6Zm1-2v1h4V4h-4Z'/%3E%3C/svg%3E"); }
.icon-bolt { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 4 14h6l-1 8 9-12h-6l1-8Z'/%3E%3C/svg%3E"); }
.icon-message { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H8l-4 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E"); }
.icon-cross { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 2h2v7h5v2h-5v11h-2V11H6V9h5V2Z'/%3E%3C/svg%3E"); }
.icon-crown { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m3 7 4.5 4L12 5l4.5 6L21 7l-2 12H5L3 7Zm4 14h10v2H7v-2Z'/%3E%3C/svg%3E"); }
.icon-sparkle { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 2.1 5.9L20 10l-5.9 2.1L12 18l-2.1-5.9L4 10l5.9-2.1L12 2Zm7 13 1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3ZM5 14l.8 2.2L8 17l-2.2.8L5 20l-.8-2.2L2 17l2.2-.8L5 14Z'/%3E%3C/svg%3E"); }
.icon-hands { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2a2 2 0 0 1 2 2v5h1V3a2 2 0 1 1 4 0v6h1V5a2 2 0 1 1 4 0v8c0 4.42-3.58 8-8 8-3.28 0-6.1-1.97-7.34-4.8a6.96 6.96 0 0 1-.61-2.9V8a2 2 0 1 1 4 0v5h1V4a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E"); }
.icon-books { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5.5A2.5 2.5 0 0 1 6.5 3H19v15.5A2.5 2.5 0 0 1 16.5 21H6.5A2.5 2.5 0 0 1 4 18.5v-13Zm2 0v13a.5.5 0 0 0 .5.5H17V5H6.5a.5.5 0 0 0-.5.5Zm3 1.5h5v2H9V7Zm0 4h6v2H9v-2Zm0 4h4v2H9v-2Z'/%3E%3C/svg%3E"); }
.icon-book-open { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 6.5c-1.8-1.2-4.7-1.68-8-1.3V19c3.1-.53 5.6-.27 8 1.03 2.4-1.3 4.9-1.56 8-1.03V5.2c-3.3-.38-6.2.1-8 1.3Zm-1 10.86a11.3 11.3 0 0 0-5-.66V7.1c1.83-.06 3.58.14 5 1.01v9.25Zm2 0V8.11c1.42-.87 3.17-1.07 5-1v9.59a11.3 11.3 0 0 0-5 .66Z'/%3E%3C/svg%3E"); }
.icon-newspaper { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 4h13a2 2 0 0 1 2 2v11a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V5a1 1 0 0 1 1-1Zm1 2v11a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V6H6Zm2 2h4v4H8V8Zm5 0h3v1.5h-3V8Zm0 3h3v1.5h-3V11Zm-5 3h8v1.5H8V14Z'/%3E%3C/svg%3E"); }
.icon-arrow-left { --icon-mask: var(--icon-mask-arrow-left); }
.icon-arrow-right { --icon-mask: var(--icon-mask-arrow-right); }
.icon-close { --icon-mask: var(--icon-mask-close); }