Pixmora

Иконка загрузки файла на сервер

Стрелка вверх Lucide: передать файл на сервер. cloud-upload подчёркивает облако; hard-drive-upload - запись на диск.

Как применить иконку «На сервер»

Стрелка вверх Lucide: передать файл на сервер. cloud-upload подчёркивает облако; hard-drive-upload - запись на диск.

Сценарий страницы: Выбор файла для отправки на сервер. Основной вариант - lucide:upload, набор Lucide, автор Lucide Contributors, лицензия ISC.

На сервер (upload): Стрелка вверх к полке: отправка файла. Выбор файла, форма вложений, импорт.

В облако (cloud-upload): Стрелка в облако. Загрузка в облачное хранилище.

На диск (hard-drive-upload): Стрелка к корпусу накопителя. Копирование на диск или локальный том.

В dropzone 24–32 px. В компактной кнопке 16–20. Прогресс загрузки показывайте отдельно, не этой пиктограммой.

Это пример разметки без drag-and-drop JS. Связку label и input сохраните; стили зоны и проверку размера сделайте в проекте. Путь к SVG замените. Не путайте с download: направление «на сервер».

Лицензия ISC: https://github.com/lucide-icons/lucide/blob/main/LICENSE. Полный текст лицензии добавляется в metadata скачиваемого SVG.

Файлы SVG

Стандартные SVG с полным текстом лицензии ISC в metadata. Отдельных страниц под размер и цвет нет. PNG с выбранным размером и цветом готовится в браузере и требует JavaScript.

Полный текст лицензии ISC

Пример разметки

Доступная подпись: Загрузить файл. Имя файла в примере совпадает с основным вариантом; при смене варианта замените путь на скачанный файл.

<label for="file-upload">
  <img src="lucide-upload.svg" width="24" height="24" alt="">
  Загрузить файл
</label>
<input id="file-upload" type="file" name="file">

Частые вопросы

Чем upload отличается от download?

upload - к серверу или в сервис. download - сохранить к пользователю.

Почему не loader-circle на кнопке всегда?

loader нужен на время ожидания. До выбора файла показывайте upload; спиннер - после начала передачи.