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

Бесплатные иконки загрузки (SVG)

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

Обновлено

upload
Lucideupload
Tablerupload
Phosphorupload
Bootstrap Iconsupload
Iconoirarrow-upload-16-filled
Fluent UIupload
Material Symbolsupload
Material Design Iconsupload
Carboncloud-upload
Lucidebook-upload
Tablerupload-bold
Phosphorcloud-upload
Bootstrap Iconscloud-upload
Iconoirarrow-upload-16-regular
Fluent UIupload-rounded
Material Symbolsupload-outline
Material Design Iconscloud-upload
Carbonhard-drive-upload
Lucidefile-upload
Tablerupload-duotone
Phosphorcloud-upload-fill
Bootstrap Iconsbubble-upload
Iconoirarrow-upload-20-filled
Fluent UIupload-sharp
Material Symbolsupload-box
Material Design Iconsfetch-upload
Carbonfile-upload-filled
Tablerupload-fill
Phosphorshield-upload
Iconoirarrow-upload-20-regular
Fluent UIupload-2
Material Symbolsupload-box-outline
Material Design Iconscloud-upload
Tablerupload-light
Phosphorupload-square
Iconoirarrow-upload-24-filled
Fluent UIupload-2-outline
Material Symbolsupload-off
Material Design Iconsworld-upload
Tablerupload-thin
Phosphorupload-square-solid
Iconoirarrow-upload-24-regular
Fluent UIupload-2-outline-rounded
Material Symbolsupload-off-outline
Material Design Iconsupload-simple
Phosphorupload-data-window
Iconoirarrow-upload-32-filled
Fluent UI

Использование иконок загрузки

Стрелка вверх обычно означает загрузку или импорт; она хорошо сочетается с зонами перетаскивания файлов (drag-and-drop).

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

Доступные иконки

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

Лицензии

Эти иконки загрузки взяты из Lucide, Tabler, 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-компонента.