.ui-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  vertical-align: middle;
}

.ui-icon-home { -webkit-mask-image: url("./home.svg"); mask-image: url("./home.svg"); }
.ui-icon-grid-2x2 { -webkit-mask-image: url("./grid-2x2.svg"); mask-image: url("./grid-2x2.svg"); }
.ui-icon-clipboard-list { -webkit-mask-image: url("./clipboard-list.svg"); mask-image: url("./clipboard-list.svg"); }
.ui-icon-message-circle { -webkit-mask-image: url("./message-circle.svg"); mask-image: url("./message-circle.svg"); }
.ui-icon-user-round { -webkit-mask-image: url("./user-round.svg"); mask-image: url("./user-round.svg"); }
.ui-icon-plus { -webkit-mask-image: url("./plus.svg"); mask-image: url("./plus.svg"); }
.ui-icon-minus { -webkit-mask-image: url("./minus.svg"); mask-image: url("./minus.svg"); }
.ui-icon-arrow-left { -webkit-mask-image: url("./arrow-left.svg"); mask-image: url("./arrow-left.svg"); }
.ui-icon-arrow-right { -webkit-mask-image: url("./arrow-right.svg"); mask-image: url("./arrow-right.svg"); }
.ui-icon-chevron-right { -webkit-mask-image: url("./chevron-right.svg"); mask-image: url("./chevron-right.svg"); }
.ui-icon-x { -webkit-mask-image: url("./x.svg"); mask-image: url("./x.svg"); }
.ui-icon-map-pin { -webkit-mask-image: url("./map-pin.svg"); mask-image: url("./map-pin.svg"); }
.ui-icon-search { -webkit-mask-image: url("./search.svg"); mask-image: url("./search.svg"); }
.ui-icon-check { -webkit-mask-image: url("./check.svg"); mask-image: url("./check.svg"); }
.ui-icon-circle-check { -webkit-mask-image: url("./circle-check.svg"); mask-image: url("./circle-check.svg"); }
.ui-icon-refresh-cw { -webkit-mask-image: url("./refresh-cw.svg"); mask-image: url("./refresh-cw.svg"); }
.ui-icon-phone { -webkit-mask-image: url("./phone.svg"); mask-image: url("./phone.svg"); }
.ui-icon-clock-3 { -webkit-mask-image: url("./clock-3.svg"); mask-image: url("./clock-3.svg"); }
.ui-icon-settings { -webkit-mask-image: url("./settings.svg"); mask-image: url("./settings.svg"); }
.ui-icon-ticket { -webkit-mask-image: url("./ticket.svg"); mask-image: url("./ticket.svg"); }
.ui-icon-bike { -webkit-mask-image: url("./bike.svg"); mask-image: url("./bike.svg"); }
.ui-icon-headset { -webkit-mask-image: url("./headset.svg"); mask-image: url("./headset.svg"); }
.ui-icon-wallet { -webkit-mask-image: url("./wallet.svg"); mask-image: url("./wallet.svg"); }
.ui-icon-coins { -webkit-mask-image: url("./coins.svg"); mask-image: url("./coins.svg"); }
.ui-icon-shield-check { -webkit-mask-image: url("./shield-check.svg"); mask-image: url("./shield-check.svg"); }
.ui-icon-package { -webkit-mask-image: url("./package.svg"); mask-image: url("./package.svg"); }
.ui-icon-file-text { -webkit-mask-image: url("./file-text.svg"); mask-image: url("./file-text.svg"); }
.ui-icon-calendar-days { -webkit-mask-image: url("./calendar-days.svg"); mask-image: url("./calendar-days.svg"); }
.ui-icon-locate-fixed { -webkit-mask-image: url("./locate-fixed.svg"); mask-image: url("./locate-fixed.svg"); }
.ui-icon-gift { -webkit-mask-image: url("./gift.svg"); mask-image: url("./gift.svg"); }
.ui-icon-credit-card { -webkit-mask-image: url("./credit-card.svg"); mask-image: url("./credit-card.svg"); }
.ui-icon-circle-alert { -webkit-mask-image: url("./circle-alert.svg"); mask-image: url("./circle-alert.svg"); }
.ui-icon-star { -webkit-mask-image: url("./star.svg"); mask-image: url("./star.svg"); }
.ui-icon-bell { -webkit-mask-image: url("./bell.svg"); mask-image: url("./bell.svg"); }
.ui-icon-image-plus { -webkit-mask-image: url("./image-plus.svg"); mask-image: url("./image-plus.svg"); }
.ui-icon-upload { -webkit-mask-image: url("./upload.svg"); mask-image: url("./upload.svg"); }
.ui-icon-circle-help { -webkit-mask-image: url("./circle-help.svg"); mask-image: url("./circle-help.svg"); }
.ui-icon-navigation { -webkit-mask-image: url("./navigation.svg"); mask-image: url("./navigation.svg"); }
.ui-icon-route { -webkit-mask-image: url("./route.svg"); mask-image: url("./route.svg"); }
.ui-icon-user-check { -webkit-mask-image: url("./user-check.svg"); mask-image: url("./user-check.svg"); }