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

Kostenlose Suchsymbole (SVG)

48 kostenlose Suchsymbole aus Open-Source-Sets – klicke auf eins, um Größe, Farbe und Strichstärke anzupassen, und kopiere es als SVG, JSX, Data-URI oder CSS.

Aktualisiert am

search
Lucidesearch
Tablersearch
Bootstrap Iconssearch
Iconoirsearch-12-filled
Fluent UIsearch
Material Symbolssearch
Material Design Iconssearch
Carbonsearch-x
Lucidesearch-filled
Tablerdoc-search
Iconoirsearch-12-regular
Fluent UIsearch-rounded
Material Symbolscar-search
Material Design Iconsbook-search
Lucideeye-search
Tablerarea-search
Iconoirsearch-16-filled
Fluent UImap-search
Material Symbolscar-search-outline
Material Design Iconsfile-search
Lucidemap-search
Tablerpage-search
Iconoirsearch-16-regular
Fluent UImap-search-outline
Material Symbolssearch-add
Material Design Iconsmail-search
Lucidesearch-off
Tablersearch-font
Iconoirsearch-20-filled
Fluent UImap-search-outline-rounded
Material Symbolssearch-add-outline
Material Design Iconsscan-search
Lucidebell-search
Tablersearch-20-regular
Fluent UImap-search-outline-sharp
Material Symbolsmap-search
Material Design Iconssearch-code
Lucidefile-search
Tablersearch-24-filled
Fluent UImap-search-rounded
Material Symbolsmap-search-outline
Material Design Iconstext-search
Lucideflag-search
Tablersearch-24-regular
Fluent UImap-search-sharp
Material Symbolssearch-web
Material Design Iconsuser-search
Lucide

Suchsymbole verwenden

Eine Lupe kennzeichnet Suchfelder und Buttons; platziere sie links im Eingabefeld oder als Button, der sich auf kleinen Bildschirmen zu einem Feld ausklappt.

Alle Icons hier folgen currentColor, übernehmen also die Textfarbe des Elements, in dem sie stehen – ein SVG funktioniert auf hellen und dunklen Hintergründen, in Links und in Buttons. Setze eine explizite width und height (oder bestimme sie 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, ergänze aria-hidden="true". Ist es der einzige Inhalt eines Buttons oder Links, gib diesem Element ein aria-label wie „Suchen“.

Lizenzen

Diese Suchsymbole stammen von Lucide, Tabler, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols, Material Design Icons und Carbon – Open-Source-Sets unter MIT-, ISC- oder Apache-2.0-Lizenz, die persönliche und kommerzielle Nutzung erlauben. Brauchst du etwas anderes? Durchsuche über 70.000 Icons im SVG Icon Finder.

Häufige Fragen

Sind diese Suchsymbole für kommerzielle Projekte kostenlos?
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 Suchsymbols?
Die SVGs verwenden currentColor. Setze daher die CSS-Farbe 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.