<!--https://dsgnmax.ru/icon-favourite-->
<style>
/*Своя иконка избранного в карточках товаров*/
:root{
    --iconNormal: url(https://static.tildacdn.com/tild6463-6437-4231-b031-396539636438/normal.svg);
    --iconAdded: url(https://static.tildacdn.com/tild3465-3239-4632-a466-353764383736/hover.svg);
    --iconScaleHover: scale(1.1);  /*Увеличение иконки при наведении*/
    --iconTransition: all .4s ease-in-out;  /*Плавность анимации*/
    --bgIconRadiusNormal: 10px; /*Радиус скругления углов у подложки с иконкой*/
    --bgIconRadiusHover: 20px; /*Радиус скругления углов у подложки с иконкой при наведении*/
    --bgIconColorHover: #FED4D4;    /*Цвет подложки с иконкой при наведении*/
    --bgIconColorAdded: #ffffff;    /*Цвет подложки с иконкой, когда товар добавлен в избранное*/
    --bgIconColorNomral: #fff; /*Цвет подложки в обычном состоянии*/
    --widthIcon: 32px;
    --heightIcon: 32px;
    
}
/*Иконка в обычном состоянии*/
    a.t1002__addBtn:after {
    content: "";
    position: absolute;
    width: var(--widthIcon);
    height: var(--heightIcon);
    background-image: var(--iconNormal);
    background-repeat: no-repeat;
    background-size: cover;
    transition: var(--iconTransition);
}   

/*Иконка при наведении*/
    a.t1002__addBtn:hover:after {
    content: "";
    transform: var(--iconScaleHover);
    transition: var(--iconTransition);
}   

/*Иконка, когда товар добавили в избранное*/
    a.t1002__addBtn_active:after {
    content: "";
    width: var(--widthIcon);
    height: var(--heightIcon);
    background-image: var(--iconAdded);
    background-repeat: no-repeat;
}

/*Скрываем оригинальную иконку*/
.t1002__addBtn svg{
    display:none;
}

/*Если нужен определенный радиус скругления и цвет у подложки с иконкой*/

.t1002__addBtn{
    border-radius: var(--bgIconRadiusNormal) !important; /*Радиус скругления*/
    background: var(--bgIconColorNomral) !important;    /*Цвет подложки*/
    transition: var(--iconTransition);
}
.t1002__addBtn:hover{
    border-radius: var(--bgIconRadiusHover) !important; /*Радиус скругления при наведении*/
    background: var(--bgIconColorHover) !important;    /*Цвет подложки при наведении*/
    transition: var(--iconTransition);
}
.t1002__addBtn_active{
    background: var(--bgIconColorAdded) !important;
}
</style>