Pixmora

Иконка сердца для избранного

Сердце Lucide для списка желаний и реакции «нравится». Ниже пример разметки переключателя с aria-pressed.

Как применить иконку «Избранное»

Сердце Lucide для списка желаний и реакции «нравится». Ниже пример разметки переключателя с aria-pressed.

Сценарий страницы: Избранное и понравившиеся товары. Основной вариант - lucide:heart, набор Lucide, автор Lucide Contributors, лицензия ISC.

Избранное (heart): Контур сердца для реакции и wishlist. Добавление товара или статьи в избранное.

Доверие (heart-handshake): Рукопожатие внутри сердца: забота или партнёрство. Блок ценностей, поддержка, благотворительность. Не как обычный лайк.

Добавить в список (heart-plus): Сердце с плюсом: явное добавление. Кнопка «В избранное» с акцентом на добавление.

На карточке товара 20–24 px. В панели реакций можно 16. Активное состояние: для img скачайте нужный цвет или меняйте src; для inline удалите/переопределите root color. Отдельных тёмных брендовых файлов здесь нет.

Это пример разметки без обработчиков. Замените путь к SVG и в своём коде обновляйте aria-pressed и подпись: «Добавить в избранное» / «Убрать из избранного».

Лицензия ISC: https://github.com/lucide-icons/lucide/blob/main/LICENSE. Полный текст лицензии добавляется в metadata скачиваемого SVG.

Файлы SVG

Стандартные SVG с полным текстом лицензии ISC в metadata. Отдельных страниц под размер и цвет нет. PNG с выбранным размером и цветом готовится в браузере и требует JavaScript.

Полный текст лицензии ISC

Пример разметки

Доступная подпись: Добавить в избранное. Имя файла в примере совпадает с основным вариантом; при смене варианта замените путь на скачанный файл.

<button type="button" aria-pressed="false" aria-label="Добавить в избранное">
  <img src="lucide-heart.svg" width="24" height="24" alt="">
</button>

Частые вопросы

Как показать активное состояние?

Обновляйте aria-pressed. Цвет через img не наследуется от родителя: скачайте SVG нужного цвета или вставьте inline и переопределите root color. Отдельного «закрашенного брендового» файла в этой подборке нет.

Подойдёт ли сердце для «здоровье»?

Да, в медицинском контексте, но подпись должна говорить о здоровье, а не об избранном.