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

Kostenlose Einstellungen-Icons (SVG)

48 kostenlose Einstellungen-Icons aus Open-Source-Sets – klick auf eines, um Größe, Farbe und Strichstärke anzupassen und es als SVG, JSX, Data-URI oder CSS zu kopieren.

Aktualisiert am

settings
Lucidesettings
Tablersettings
Iconoirsettings-16-filled
Fluent UIsettings
Material Symbolssettings
Material Design Iconssettings
Carbonsettings-2
Lucidesettings-filled
Tablerios-settings
Iconoirsettings-16-regular
Fluent UIsettings-outline
Material Symbolssettings-outline
Material Design Iconssettings-edit
Carbonsettings-2
Tablersettings-20-filled
Fluent UIsettings-outline-rounded
Material Symbolscar-settings
Material Design Iconssettings-view
Carbonsettings-x
Tablersettings-20-regular
Fluent UIsettings-rounded
Material Symbolssettings-off
Material Design Iconssync-settings
Carbonsettings-ai
Tablersettings-24-filled
Fluent UIsettings-cell
Material Symbolssettings-off-outline
Material Design Iconstask-settings
Carbonsettings-up
Tablersettings-24-regular
Fluent UIrule-settings
Material Symbolseye-settings
Material Design Iconsuser-settings
Carbonsettings-cog
Tablersettings-28-filled
Fluent UIrule-settings-rounded
Material Symbolseye-settings-outline
Material Design Iconssettings-off
Tablersettings-28-regular
Fluent UIbell-settings
Material Design Iconssettings-pin
Tablersettings-32-filled
Fluent UIbell-settings-outline
Material Design Iconsfile-settings
Tablersettings-32-light
Fluent UIbook-settings
Material Design Iconsfile-settings-filled
Tabler

Einstellungs-Icons verwenden

Das Zahnrad (Cog) öffnet Einstellungen und Optionen; ein Schieberegler-Icon ist eine gängige Alternative für Filter.

Alle Icons hier folgen currentColor, nehmen also die Textfarbe des Elements an, 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 passe die Größe per CSS mit 1em an), damit sich das Layout nicht verschiebt, während die Seite lädt.

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 „Einstellungen“.

Lizenzen

Diese Einstellungen-Icons stammen von Lucide, Tabler, 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 Einstellungen-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 Einstellungen-Icons?
Die SVGs verwenden currentColor. Setze dafür 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.