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

Kostenlose Herz-Icons (SVG)

48 kostenlose Herz-Icons aus Open-Source-Sets – klick ein Icon an, ändere Größe, Farbe und Strichstärke und kopiere es als SVG, JSX, Data-URI oder CSS.

Aktualisiert am

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

Herz-Icons verwenden

Herzen stehen für Gefällt mir, Favorit oder Später ansehen. Ein gefülltes Herz für den aktiven Zustand und ein Umriss für den inaktiven ist das übliche Muster.

Alle Icons hier folgen currentColor und übernehmen daher die Textfarbe des Elements, in dem sie stehen. So funktioniert ein SVG auf hellen und dunklen Hintergründen, in Links und in Buttons. Setz eine explizite width und height (oder definiere die Größe per CSS mit 1em), damit sich das Layout beim Laden der Seite nicht verschiebt.

Barrierefreie Icons

Ist das Icon dekorativ oder steht neben sichtbarem Text, ergänze aria-hidden="true". Ist es der einzige Inhalt eines Buttons oder Links, gib diesem Element ein aria-label wie „Herz“.

Lizenzen

Diese Herz-Icons stammen von Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols und Material Design Icons. Es sind Open-Source-Sets unter MIT-, ISC- oder Apache-2.0-Lizenz, die persönliche und kommerzielle Nutzung erlauben. Brauchst du etwas anderes? Durchsuche alle 70.000+ Icons im SVG Icon Finder.

Häufige Fragen

Sind diese Herz-Icons kostenlos für kommerzielle Nutzung?
Ja. Sie stammen aus Open-Source-Icon-Sets unter MIT-, ISC- oder Apache-2.0-Lizenz, die kommerzielle Nutzung erlauben. Behalte den Lizenzhinweis bei, wenn du die Icon-Dateien selbst weitergibst.
Wie ändere ich die Farbe eines Herz-Icons?
Die SVGs nutzen currentColor. Setz also die CSS-color des übergeordneten Elements, oder öffne das Icon im Finder und wähle vor dem Kopieren eine feste Farbe.
Kann ich diese Icons in Webflow oder React verwenden?
Ja. Öffne ein Icon und nutze „Copy to Webflow“ (fügt ein Code Embed ein) oder „Copy JSX“ für eine React-Komponente.