.icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;

    /* цвет для маски */
    background-color: white;

    /* универсальные свойства mask */
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.accent {
    background-color: var(--primary-accent);
}

.icon-settings {
    -webkit-mask-image: url('/static/icons/settings.svg');
    mask-image: url('/static/icons/settings.svg');
}

.icon-big-building {
    -webkit-mask-image: url('/static/icons/big_building.svg');
    mask-image: url('/static/icons/big_building.svg');
}

.icon-map {
    -webkit-mask-image: url('/static/icons/map.svg');
    mask-image: url('/static/icons/map.svg');
}

.icon-heart {
    -webkit-mask-image: url('/static/icons/heart.svg');
    mask-image: url('/static/icons/heart.svg');
}

.icon-menu {
    -webkit-mask-image: url('/static/icons/menu.svg');
    mask-image: url('/static/icons/menu.svg');
}

.icon-info {
    -webkit-mask-image: url('/static/icons/info_circle.svg');
    mask-image: url('/static/icons/info_circle.svg');
}

.icon-chevron-right {
    -webkit-mask-image: url('/static/icons/chevron_right.svg');
    mask-image: url('/static/icons/chevron_right.svg');
}

.icon-arrow-left {
    -webkit-mask-image: url('/static/icons/arrow_left.svg');
    mask-image: url('/static/icons/arrow_left.svg');
}

.icon-marker {
    -webkit-mask-image: url('/static/icons/marker.svg');
    mask-image: url('/static/icons/marker.svg');
}

.icon-phone {
    -webkit-mask-image: url('/static/icons/phone.svg');
    mask-image: url('/static/icons/phone.svg');
}

.icon-mail {
    -webkit-mask-image: url('/static/icons/mail.svg');
    mask-image: url('/static/icons/mail.svg');
}

.icon-telegram {
    background-image: url('/static/icons/telegram.svg');
    background-color: transparent;
}

.icon-whatsapp {
    background-image: url('/static/icons/whatsapp.svg');
    background-color: transparent;
}

.icon-copy {
    -webkit-mask-image: url('/static/icons/copy.svg');
    mask-image: url('/static/icons/copy.svg');
}

.icon-chevron-down {
    -webkit-mask-image: url('/static/icons/chevron_down.svg');
    mask-image: url('/static/icons/chevron_down.svg');
}

.icon-cross {
    -webkit-mask-image: url('/static/icons/cross.svg');
    mask-image: url('/static/icons/cross.svg');
}

.icon-search {
    -webkit-mask-image: url('/static/icons/search.svg');
    mask-image: url('/static/icons/search.svg');
}

.icon-marker {
    -webkit-mask-image: url('/static/icons/marker.svg');
    mask-image: url('/static/icons/marker.svg');
}

.icon-calendar-check {
    -webkit-mask-image: url('/static/icons/calendar_check.svg');
    mask-image: url('/static/icons/calendar_check.svg');
}

.icon-coins-stacked {
    -webkit-mask-image: url('/static/icons/coins_stacked.svg');
    mask-image: url('/static/icons/coins_stacked.svg');
}

.icon-home {
    -webkit-mask-image: url('/static/icons/home.svg');
    mask-image: url('/static/icons/home.svg');
}

.icon-coins {
    -webkit-mask-image: url('/static/icons/coins.svg');
    mask-image: url('/static/icons/coins.svg');
}

.icon-pin {
    -webkit-mask-image: url('/static/icons/pin.svg');
    mask-image: url('/static/icons/pin.svg');
}

.icon-vertical-switch {
    -webkit-mask-image: url('/static/icons/vertical_switch.svg');
    mask-image: url('/static/icons/vertical_switch.svg');
}

.icon-calendar {
    -webkit-mask-image: url('/static/icons/calendar.svg');
    mask-image: url('/static/icons/calendar.svg');
}

.icon-heart-filled {
    -webkit-mask-image: url('/static/icons/heart_filled.svg');
    mask-image: url('/static/icons/heart_filled.svg');
}

.icon-paragraph-spacing {
    -webkit-mask-image: url('/static/icons/paragraph_spacing.svg');
    mask-image: url('/static/icons/paragraph_spacing.svg');
}

.icon-share {
    -webkit-mask-image: url('/static/icons/share.svg');
    mask-image: url('/static/icons/share.svg');
}

.icon-building {
    -webkit-mask-image: url('/static/icons/building.svg');
    mask-image: url('/static/icons/building.svg');
}

.icon-human {
    -webkit-mask-image: url('/static/icons/human.svg');
    mask-image: url('/static/icons/human.svg');
}

.icon-chart-up {
    -webkit-mask-image: url('/static/icons/line_chart_up.svg');
    mask-image: url('/static/icons/line_chart_up.svg');
}

.icon-trash-bin {
    -webkit-mask-image: url('/static/icons/trash-bin.svg');
    mask-image: url('/static/icons/trash-bin.svg');
}

.icon-coins-swap {
    -webkit-mask-image: url('/static/icons/coins_swap.svg');
    mask-image: url('/static/icons/coins_swap.svg');
}

.icon-wallet {
    -webkit-mask-image: url('/static/icons/wallet.svg');
    mask-image: url('/static/icons/wallet.svg');
}

.icon-clock-check {
    -webkit-mask-image: url('/static/icons/clock_check.svg');
    mask-image: url('/static/icons/clock_check.svg');
}

.icon-pin-filled {
    background-image: url('/static/icons/pin_filled.svg');
    background-color: transparent;
}

.icon-smartphone {
    -webkit-mask-image: url('/static/icons/smartphone.svg');
    mask-image: url('/static/icons/smartphone.svg');
}

.icon-document {
    -webkit-mask-image: url('/static/icons/document.svg');
    mask-image: url('/static/icons/document.svg');
}

.icon-diplomat {
    -webkit-mask-image: url('/static/icons/diplomat.svg');
    mask-image: url('/static/icons/diplomat.svg');
}

.icon-chart-up-no-axis {
    -webkit-mask-image: url('/static/icons/line_chart_up_no_axis.svg');
    mask-image: url('/static/icons/line_chart_up_no_axis.svg');
}