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

Kostenlose Menü-Icons (SVG)

48 kostenlose Menü-Icons aus Open-Source-Sets. Klicke auf eines, passe Größe, Farbe und Strichstärke an und kopiere es als SVG, JSX, Data-URI oder CSS.

Aktualisiert am

menu
Lucidemenu
Tablermenu-up
Bootstrap Iconsmenu
Iconoirmenu
Material Symbolsmenu
Material Design Iconsmenu
Carbonsquare-menu
Lucidemenu-2
Tablermenu-app
Bootstrap Iconsmenu-scale
Iconoirmenu-rounded
Material Symbolsmenu-up
Material Design Iconsoverflow-menu-vertical
Carbonmenu-2-filled
Tablermenu-app-fill
Bootstrap Iconsmenu-book
Material Symbolsmenu-up-outline
Material Design Iconsoverflow-menu-horizontal
Carbonmenu-3
Tablermenu-down
Bootstrap Iconsmenu-book-outline
Material Symbolsmenu-down
Material Design Iconsmenu-4
Tablermenu-button
Bootstrap Iconsmenu-book-outline-rounded
Material Symbolsmenu-down-outline
Material Design Iconsmenu-deep
Tablermenu-button-fill
Bootstrap Iconsmenu-book-outline-sharp
Material Symbolsmenu-left
Material Design Iconsmenu-order
Tablermenu-button-wide
Bootstrap Iconsmenu-book-rounded
Material Symbolsmenu-left-outline
Material Design Iconsmenu-button-wide-fill
Bootstrap Iconsmenu-book-sharp
Material Symbolsmenu-open
Material Design Iconsmenu-open
Material Symbolsmenu-swap
Material Design Iconsmenu-open-rounded
Material Symbolsmenu-swap-outline
Material Design Iconsmenu-book-2
Material Symbolsmenu-close
Material Design Iconsmenu-book-2-outline
Material Symbolsmenu-right
Material Design Iconsmenu-book-2-outline-rounded
Material Symbolsmenu-right-outline
Material Design Icons

Menü-Icons verwenden

Das dreizeilige „Hamburger“-Symbol öffnet die Navigation auf dem Smartphone. Kombiniere es für den geöffneten Zustand mit einem Schließen-Icon (×).

Alle Icons hier folgen currentColor, übernehmen also die Textfarbe des Elements, in dem sie stehen. Ein SVG funktioniert so auf hellen und dunklen Hintergründen, in Links und in Buttons. Setze 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 es neben sichtbarem Text, füge aria-hidden="true" hinzu. Ist es der einzige Inhalt eines Buttons oder Links, gib diesem Element ein aria-label wie „Menü“.

Lizenzen

Diese Menü-Icons stammen von Lucide, Tabler, Bootstrap Icons, Iconoir, Material Symbols, Material Design Icons und Carbon. Es sind Open-Source-Sets unter den Lizenzen MIT, ISC oder Apache 2.0, die private und kommerzielle Nutzung erlauben. Brauchst du etwas anderes? Durchsuche alle 70.000+ Icons im SVG Icon Finder.

Häufige Fragen

Sind diese Menü-Icons kostenlos für die kommerzielle Nutzung?
Ja. Sie stammen aus Open-Source-Icon-Sets unter den Lizenzen MIT, ISC oder Apache 2.0, die kommerzielle Nutzung erlauben. Behalte den Lizenzhinweis bei, wenn du die Icon-Dateien selbst weitergibst.
Wie ändere ich die Farbe eines Menü-Icons?
Die SVGs nutzen currentColor. Setze also die CSS-color des übergeordneten Elements. Alternativ öffnest du das Icon im Finder und wählst 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.