devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt

Бесплатные иконки тегов (SVG)

48 бесплатных иконок тегов из открытых наборов — кликните по любой, чтобы изменить размер, цвет и толщину обводки, и скопируйте её как SVG, JSX, data URI или CSS.

Обновлено

tag
Lucidetag
Tablertag
Heroiconstag
Phosphortag
Bootstrap Iconsar-tag
Iconoirtag-16-filled
Fluent UItag
Material Symbolstag
Material Design Iconstag
Carbontag-x
Lucidetag-filled
Tablertag-16-solid
Heroiconstag-bold
Phosphortag-fill
Bootstrap Iconsev-tag
Iconoirtag-16-regular
Fluent UItag-rounded
Material Symbolstag-outline
Material Design Iconstag-edit
Carbontag-plus
Lucidetag-off
Tablertag-20-solid
Heroiconstag-duotone
Phosphorfx-tag
Iconoirtag-20-filled
Fluent UIcar-tag
Material Symbolstag-off
Material Design Iconstag-none
Carbontag-plus
Tablertag-solid
Heroiconstag-fill
Phosphorfx-tag-solid
Iconoirtag-20-regular
Fluent UIcar-tag-outline
Material Symbolstag-off-outline
Material Design Iconstag-light
Phosphoron-tag
Iconoirtag-24-filled
Fluent UIcar-tag-outline-rounded
Material Symbolstag-edit
Material Design Iconstag-thin
Phosphorvr-tag
Iconoirtag-24-regular
Fluent UIcar-tag-outline-sharp
Material Symbolstag-edit-outline
Material Design Iconsoff-tag
Iconoirtag-28-filled
Fluent UI

Использование иконок тегов

Теги помечают метки, категории, цены и скидки.

Все иконки здесь следуют currentColor, поэтому они наследуют цвет текста того элемента, в котором находятся: один SVG одинаково работает на светлом и тёмном фоне, в ссылках и кнопках. Задайте явные width и height (или задайте размер в CSS через 1em), чтобы макет не смещался во время загрузки страницы.

Доступные иконки

Если иконка декоративная или стоит рядом с видимым текстом, добавьте aria-hidden="true". Если она — единственное содержимое кнопки или ссылки, задайте этому элементу aria-label, например «Тег».

Лицензии

Эти иконки тегов взяты из наборов Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols, Material Design Icons, Carbon — открытых наборов под лицензиями MIT, ISC или Apache 2.0, которые разрешают личное и коммерческое использование. Нужно что-то другое? Ищите среди более чем 70 000 иконок в SVG Icon Finder.

Часто задаваемые вопросы

Эти иконки тегов можно бесплатно использовать в коммерческих проектах?
Да. Они взяты из открытых наборов иконок под лицензиями MIT, ISC или Apache 2.0, которые разрешают коммерческое использование. Сохраняйте уведомление о лицензии, если распространяете сами файлы иконок.
Как изменить цвет иконки тега?
SVG использует currentColor, поэтому задайте CSS-свойство color у родительского элемента — или откройте иконку в поиске и выберите фиксированный цвет перед копированием.
Можно ли использовать эти иконки в Webflow или React?
Да. Откройте иконку и используйте «Копировать в Webflow» (вставит Code Embed) или «Copy JSX» для компонента React.