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

Kostenlose Close Icons (SVG)

48 kostenlose Close Icons aus Open-Source-Sets — klicke auf ein Icon, um Größe, Farbe und Strichstärke anzupassen, und kopiere es als SVG, JSX, Data URI oder CSS.

Aktualisiert am

shield-close
Lucidetab-close
Tablereye-closed
Iconoirpane-close-24-filled
Fluent UIclose
Material Symbolsclose
Material Design Iconsclose
Carbonpanel-top-close
Lucideweb-window-close
Iconoirpane-close-24-regular
Fluent UIclose-rounded
Material Symbolsclose-outline
Material Design Iconsclose-filled
Carbonpanel-left-close
Lucideshare-close-tray-20-filled
Fluent UItab-close
Material Symbolsclose-box
Material Design Iconsclose-outline
Carbonpanel-right-close
Lucideshare-close-tray-20-regular
Fluent UItab-close-outline
Material Symbolsclose-box-outline
Material Design Iconsclose-large
Carbonshare-close-tray-24-filled
Fluent UItab-close-outline-rounded
Material Symbolsmenu-close
Material Design Iconsside-panel-close
Carbonshare-close-tray-24-regular
Fluent UItab-close-outline-sharp
Material Symbolsclose-thick
Material Design Iconsside-panel-close-filled
Carbontab-close-rounded
Material Symbolsclose-circle
Material Design Iconsright-panel-close
Carbontab-close-sharp
Material Symbolsclose-circle-outline
Material Design Iconsright-panel-close-filled
Carbonclose-small
Material Symbolswindow-close
Material Design Iconsclose-small-outline
Material Symbolsclose-network
Material Design Iconsclose-small-outline-rounded
Material Symbolsclose-network-outline
Material Design Iconsclose-small-rounded
Material Symbolsclose-octagon
Material Design Iconstab-close-right
Material Symbolsclose-octagon-outline
Material Design Iconstab-close-right-outline
Material Symbols

Close Icons verwenden

Ein × schließt Dialoge, blendet Hinweise aus und leert Eingabefelder; gib dem Button einen sichtbaren Fokuszustand und ein aria-label.

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 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 „Schließen“.

Lizenzen

Diese Close 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 Close Icons für die kommerzielle Nutzung 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 Close Icons?
Die SVGs verwenden currentColor. Setze daher 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.