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

Бесплатные иконки облака (SVG)

48 бесплатных иконок облака из наборов с открытым исходным кодом — нажмите на любую, чтобы изменить размер, цвет и толщину линии, и скопируйте её как SVG, JSX, data URI или CSS.

Обновлено

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

Использование иконок облака

Облако в интерфейсе обычно означает онлайн-хранилище, синхронизацию и хостинг, а также погоду — в зависимости от контекста.

Все иконки здесь наследуют currentColor, поэтому они принимают цвет текста элемента, в котором находятся: одна SVG-иконка работает и на светлом, и на тёмном фоне, в ссылках и в кнопках. Задайте явные width и height (или задайте размер в CSS через 1em), чтобы верстка не смещалась во время загрузки страницы.

Доступность иконок

Если иконка декоративная или стоит рядом с видимым текстом, добавьте aria-hidden="true". Если она — единственное содержимое кнопки или ссылки, задайте этому элементу aria-label, например «Облако».

Лицензии

Иконки облаков взяты из наборов Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols, Material Design Icons и Carbon — наборов с открытым исходным кодом под лицензиями MIT, ISC или Apache 2.0, которые разрешают личное и коммерческое использование. Нужно что-то другое? Ищите среди более 70 000 иконок в SVG Icon Finder.

Часто задаваемые вопросы

Можно ли использовать эти иконки облака в коммерческих проектах?
Да. Они взяты из наборов с открытым исходным кодом под лицензиями MIT, ISC или Apache 2.0, которые разрешают коммерческое использование. Если вы распространяете сами файлы иконок, сохраняйте уведомление о лицензии.
Как изменить цвет иконки облака?
SVG используют currentColor, поэтому задайте CSS-свойство color для родительского элемента — или откройте иконку в поиске и выберите фиксированный цвет перед копированием.
Можно ли использовать иконки в Webflow или React?
Да. Откройте иконку и нажмите «Copy to Webflow» (вставит Code Embed) или «Copy JSX» для React-компонента.