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

Kostenlose Cloud-Icons (SVG)

48 kostenlose Cloud-Icons aus Open-Source-Sets – klick eins an, um Größe, Farbe und Strichstärke zu ändern, und kopiere es als SVG, JSX, Data URI oder CSS.

Aktualisiert am

cloud
Lucidecloud
Tablercloud
Heroiconscloud
Phosphorcloud
Bootstrap Iconscloud
Iconoircloud-16-filled
Fluent UIcloud
Material Symbolscloud
Material Design Iconscloud
Carboncloud-cog
Lucidecloud-filled
Tablercloud-16-solid
Heroiconscloud-bold
Phosphorcloud-fill
Bootstrap Iconscloud-16-regular
Fluent UIcloud-outline
Material Symbolscloud-outline
Material Design Iconscloud-app
Carboncloud-fog
Lucidecloud-x
Tablercloud-20-solid
Heroiconscloud-duotone
Phosphorcloud-fog
Bootstrap Iconscloud-20-filled
Fluent UIcloud-off
Material Symbolscloud-cog
Material Design Iconsibm-cloud
Carboncloud-off
Lucidecloud-up
Tablercloud-solid
Heroiconscloud-fill
Phosphorcloud-fog-fill
Bootstrap Iconscloud-20-regular
Fluent UIcloud-off-outline
Material Symbolscloud-cog-outline
Material Design Iconscloud-sun
Lucidecloud-cog
Tablercloud-light
Phosphorcloud-sun
Bootstrap Iconscloud-24-filled
Fluent UIcloud-off-outline-rounded
Material Symbolscloud-key
Material Design Iconscloud-fog
Tablercloud-thin
Phosphorcloud-sun-fill
Bootstrap Iconscloud-24-regular
Fluent UIcloud-off-rounded
Material Symbols

Cloud-Icons verwenden

Wolken stehen für Online-Speicher, Synchronisation und Hosting – je nach Kontext auch für Wetter.

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 definiere die Größe per CSS mit 1em), damit sich das Layout nicht verschiebt, während die Seite lädt.

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

Lizenzen

Diese Cloud-Icons stammen von Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols, Material Design Icons, 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 Cloud-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 Cloud-Icons?
Die SVGs verwenden currentColor. Setze also 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.