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

Бесплатные иконки сердца (SVG)

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

Обновлено

heart
Lucideheart
Tablerheart
Heroiconsheart
Phosphorheart
Bootstrap Iconsheart
Iconoirheart-12-filled
Fluent UIecg-heart
Material Symbolsheart
Material Design Iconsheart-x
Lucideheart-filled
Tablerheart-16-solid
Heroiconsheart-bold
Phosphorheart-fill
Bootstrap Iconsheart-solid
Iconoirheart-12-regular
Fluent UIecg-heart-outline
Material Symbolsheart-outline
Material Design Iconsheart-off
Lucideheart-x
Tablerheart-20-solid
Heroiconsheart-duotone
Phosphorbag-heart
Bootstrap Iconsheart-16-filled
Fluent UIecg-heart-outline-sharp
Material Symbolsheart-box
Material Design Iconsheart-up
Tablerheart-solid
Heroiconsheart-fill
Phosphorbag-heart-fill
Bootstrap Iconsheart-16-regular
Fluent UIecg-heart-sharp
Material Symbolsheart-box-outline
Material Design Iconseye-heart
Tablerheart-light
Phosphorheart-20-filled
Fluent UIdine-heart
Material Symbolsheart-cog
Material Design Iconsheart-cog
Tablerheart-thin
Phosphorheart-20-regular
Fluent UIdine-heart-outline
Material Symbolsheart-cog-outline
Material Design Iconsheart-off
Tablerheart-24-filled
Fluent UIdine-heart-outline-rounded
Material Symbolsheart-off
Material Design Iconsheart-pin
Tabler

Использование иконок сердца

Сердце обозначает «нравится», «избранное» или «сохранить на потом». Обычная практика: заполненное сердце для активного состояния и контурное для неактивного.

Все иконки здесь используют 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. Это наборы с открытым исходным кодом под лицензиями MIT, ISC или Apache 2.0, которые разрешают личное и коммерческое использование. Нужны другие иконки? Ищите среди более чем 70 000 в SVG Icon Finder.

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

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