Pixmora

Иконка ценника для метки товара

Бирка Lucide: одна метка, стопка тегов и добавление ярлыка. Для цены, акции и системы тегов в каталоге.

Как применить иконку «Бирка»

Бирка Lucide: одна метка, стопка тегов и добавление ярлыка. Для цены, акции и системы тегов в каталоге.

Сценарий страницы: Ярлык цены в карточке товара. Основной вариант - lucide:tag, набор Lucide, автор Lucide Contributors, лицензия ISC.

Бирка (tag): Одна метка с отверстием и точкой. Цена, ярлык товара, одиночный тег.

Несколько меток (tags): Две перекрывающиеся бирки. Набор тегов или категории.

Добавить метку (tag-plus): Бирка и плюс: создание тега. Кнопка «Добавить тег» в админке.

Рядом с ценой 16–20 px. В фильтре тегов 20. Не используйте tag как замену percent, если акцент на проценте скидки.

Это пример разметки без обработчиков. Сумму подставляйте из карточки товара. Замените путь к SVG. Иконка не считает скидку.

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

Файлы SVG

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

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

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

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

<p>
  <img src="lucide-tag.svg" width="20" height="20" alt="">
  <span>1&nbsp;990&nbsp;₽</span>
</p>

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

Чем tag отличается от percent?

tag - метка или ценник. percent - именно процент скидки или доли.

Подойдёт ли для хештегов?

Да, если в продукте теги выглядят как ярлыки. Для соцсетевого «#» иногда берут отдельный знак hash, если он есть в наборе.