.icon {
   display: inline-block;
   width: 20px;
   height: 20px;
   background: currentcolor;
   mask-size: contain;
   mask-repeat: no-repeat;
   mask-position: center;
   vertical-align: middle;
   flex-shrink: 0;
}

.icon-bell { mask-image: url("/web/images/icons/bell.svg"); }
.icon-house { mask-image: url("/web/images/icons/house.svg"); }
.icon-unit { mask-image: url("/web/images/icons/house.svg"); }
.icon-users { mask-image: url("/web/images/icons/users.svg"); }
.icon-user { mask-image: url("/web/images/icons/user.svg"); }
.icon-bar-chart { mask-image: url("/web/images/icons/bar-chart-2.svg"); }
.icon-clock { mask-image: url("/web/images/icons/clock.svg"); }
.icon-clipboard-check { mask-image: url("/web/images/icons/clipboard-check.svg"); }
.icon-menu { mask-image: url("/web/images/icons/menu.svg"); }
.icon-briefcase { mask-image: url("/web/images/icons/briefcase.svg"); }
.icon-client { mask-image: url("/web/images/icons/briefcase.svg"); }
.icon-settings { mask-image: url("/web/images/icons/settings.svg"); }
.icon-chevron-down { mask-image: url("/web/images/icons/chevron-down.svg"); }
.icon-delete { mask-image: url("/web/images/icons/delete.svg"); }
.icon-venetian-mask { mask-image: url("/web/images/icons/venetian-mask.svg"); }
.icon-sun { mask-image: url("/web/images/icons/sun.svg"); }
.icon-moon { mask-image: url("/web/images/icons/moon.svg"); }
.icon-log-out { mask-image: url("/web/images/icons/log-out.svg"); }
.icon-box { mask-image: url("/web/images/icons/box.svg"); }
.icon-file-text { mask-image: url("/web/images/icons/file-text.svg"); }
.icon-search { mask-image: url("/web/images/icons/search.svg"); }
.icon-filter { mask-image: url("/web/images/icons/filter.svg"); }
.icon-info { mask-image: url("/web/images/icons/info.svg"); }
.icon-user-plus { mask-image: url("/web/images/icons/user-plus.svg"); }
.icon-circle { mask-image: url("/web/images/icons/circle.svg"); }
.icon-import { mask-image: url("/web/images/icons/import.svg"); }
.icon-archive { mask-image: url("/web/images/icons/archive.svg"); }
.icon-layout-grid { mask-image: url("/web/images/icons/layout-grid.svg"); }
.icon-square-user-round { mask-image: url("/web/images/icons/square-user-round.svg"); }
.icon-triangle-alert { mask-image: url("/web/images/icons/triangle-alert.svg"); }
.icon-circle-alert { mask-image: url("/web/images/icons/circle-alert.svg"); }
.icon-circle-pause { mask-image: url("/web/images/icons/circle-pause.svg"); }
.icon-circle-check { mask-image: url("/web/images/icons/circle-check.svg"); }
.icon-clock-alert { mask-image: url("/web/images/icons/clock-alert.svg"); }
.icon-circle-x { mask-image: url("/web/images/icons/circle-x.svg"); }
.icon-palette { mask-image: url("/web/images/icons/palette.svg"); }
.icon-chevron-right { mask-image: url("/web/images/icons/chevron-right.svg"); }
.icon-bug { mask-image: url("/web/images/icons/bug.svg"); }
.icon-pause { mask-image: url("/web/images/icons/pause.svg"); }
.icon-play { mask-image: url("/web/images/icons/play.svg"); }
.icon-external-link { mask-image: url("/web/images/icons/external-link.svg"); }
.icon-refresh-ccw { mask-image: url("/web/images/icons/refresh-ccw.svg"); }
.icon-unit-sync { mask-image: url("/web/images/icons/folder-sync.svg"); }
.icon-reservation-sync { mask-image: url("/web/images/icons/calendar-sync.svg"); }
.icon-report { mask-image: url("/web/images/icons/file-spreadsheet.svg"); }
.icon-ban { mask-image: url("/web/images/icons/ban.svg"); }
.icon-chevron-left { mask-image: url("/web/images/icons/chevron-left.svg"); }
.icon-cloud-download { mask-image: url("/web/images/icons/cloud-download.svg"); }
.icon-cog { mask-image: url("/web/images/icons/cog.svg"); }
.icon-cloud-cog { mask-image: url("/web/images/icons/cloud-cog.svg"); }
.icon-map-pin-house { mask-image: url("/web/images/icons/map-pin-house.svg"); }
.icon-database-zap { mask-image: url("/web/images/icons/database-zap.svg"); }
.icon-database-backup { mask-image: url("/web/images/icons/database-backup.svg"); }
.icon-user-pen { mask-image: url("/web/images/icons/user-pen.svg"); }
.icon-square-activity { mask-image: url("/web/images/icons/square-activity.svg"); }
.icon-sheet { mask-image: url("/web/images/icons/sheet.svg"); }
.icon-sheets { mask-image: url("/web/images/icons/sheets.svg"); }
.icon-calendar-range { mask-image: url("/web/images/icons/calendar-range.svg"); }
.icon-calendar-check { mask-image: url("/web/images/icons/calendar-check.svg"); }
.icon-calendar-x { mask-image: url("/web/images/icons/calendar-x.svg"); }
.icon-calendar-cog { mask-image: url("/web/images/icons/calendar-cog.svg"); }
.icon-banknote-arrow-up { mask-image: url("/web/images/icons/banknote-arrow-up.svg"); }
.icon-map-plus { mask-image: url("/web/images/icons/map-plus.svg"); }
.icon-calendar-search { mask-image: url("/web/images/icons/calendar-search.svg"); }
.icon-square-equal { mask-image: url("/web/images/icons/square-equal.svg"); }
.icon-calculator { mask-image: url("/web/images/icons/calculator.svg"); }
.icon-sigma { mask-image: url("/web/images/icons/sigma.svg"); }
.icon-x { mask-image: url("/web/images/icons/x.svg"); }
.icon-expand { mask-image: url("/web/images/icons/expand.svg"); }
.icon-bot-message-square { mask-image: url("/web/images/icons/bot-message-square.svg"); }
.icon-send { mask-image: url("/web/images/icons/send.svg"); }
.icon-handshake { mask-image: url("/web/images/icons/handshake.svg"); }
.icon-circle-help { mask-image: url("/web/images/icons/circle-help.svg"); }
.icon-brush-cleaning { mask-image: url("/web/images/icons/brush-cleaning.svg"); }
.icon-rows-3 { mask-image: url("/web/images/icons/rows-3.svg"); }
.icon-building { mask-image: url("/web/images/icons/building-2.svg"); }
.icon-chart-no-axes-combined { mask-image: url("/web/images/icons/chart-no-axes-combined.svg"); }
.icon-layout-dashboard { mask-image: url("/web/images/icons/layout-dashboard.svg"); }
.icon-history { mask-image: url("/web/images/icons/history.svg"); }
.icon-chevrons-left-right-ellipsis { mask-image: url("/web/images/icons/chevrons-left-right-ellipsis.svg"); }
.icon-trash-2 { mask-image: url("/web/images/icons/trash-2.svg"); }
.icon-check { mask-image: url("/web/images/icons/check.svg"); }
.icon-copy { mask-image: url("/web/images/icons/copy.svg"); }
.icon-thumbs-up { mask-image: url("/web/images/icons/thumbs-up.svg"); }
.icon-download { mask-image: url("/web/images/icons/download.svg"); }
.icon-link { mask-image: url("/web/images/icons/link.svg"); }
.icon-trending-up-down { mask-image: url("/web/images/icons/trending-up-down.svg"); }
.icon-gift { mask-image: url("/web/images/icons/gift.svg"); }
.icon-stethoscope { mask-image: url("/web/images/icons/stethoscope.svg"); }
.icon-weight { mask-image: url("/web/images/icons/weight.svg"); }
.icon-lightbulb { mask-image: url("/web/images/icons/lightbulb.svg"); }
.icon-share { mask-image: url("/web/images/icons/share.svg"); }
.icon-locate-fixed { mask-image: url("/web/images/icons/locate-fixed.svg"); }
.icon-list-plus { mask-image: url("/web/images/icons/list-plus.svg"); }
.icon-milestone { mask-image: url("/web/images/icons/milestone.svg"); }
.icon-sparkles { mask-image: url("/web/images/icons/sparkles.svg"); }
.icon-star { mask-image: url("/web/images/icons/star.svg"); }
.icon-gem { mask-image: url("/web/images/icons/gem.svg"); }
.icon-wand-sparkles { mask-image: url("/web/images/icons/wand-sparkles.svg"); }
.icon-arrow-down-up { mask-image: url("/web/images/icons/arrow-down-up.svg"); }
.icon-arrow-down-narrow-wide { mask-image: url("/web/images/icons/arrow-down-narrow-wide.svg"); }
.icon-arrow-up-wide-narrow { mask-image: url("/web/images/icons/arrow-up-wide-narrow.svg"); }
.icon-construction {
   mask-image: url("/web/images/icons/construction.svg");
}
.icon-shield-check {
   mask-image: url("/web/images/icons/shield-check.svg");
}
.icon-notebook-tabs {
   mask-image: url("/web/images/icons/notebook-tabs.svg");
}
.icon-key-round {
   mask-image: url("/web/images/icons/key-round.svg");
}

/* Size variants */
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }

/* Inline image icons - for multi-color SVGs that can't use mask */
.icon-img {
   display: inline-block;
   vertical-align: middle;
   flex-shrink: 0;
}