Pixmora

Иконка стрелки вниз к следующему разделу

Стрелка вниз Lucide ведёт к следующему блоку страницы или опускает элемент. Для селекта чаще берут шеврон: он легче и привычнее в полях форм.

Как применить иконку «Стрелка вниз»

Сценарий страницы: Переход к следующему разделу. Основной вариант - lucide:arrow-down, набор Lucide, автор Lucide Contributors, лицензия ISC.

Стрелка вниз (arrow-down): Полная стрелка с хвостом вниз. Переход к блоку ниже или опустить элемент в списке.

К нижней линии (arrow-down-to-line): Стрелка к горизонтали внизу. «К концу» списка или выравнивание по нижнему краю.

Шеврон вниз (chevron-down): Короткий угол вниз: стандарт раскрытия. Селект, аккордеон, выпадающее меню.

В герое лендинга 24–32 px. В сортировке таблицы 16. В кнопке селекта предпочтительнее шеврон 16–20, а не тяжёлая стрелка.

Это пример разметки без обработчиков. Якорь #features должен совпадать с id секции на странице. Путь к SVG замените. Анимацию скролла, если нужна, добавьте отдельно.

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

Файлы SVG

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

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

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

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

<a href="#features">
  <img src="lucide-arrow-down.svg" width="24" height="24" alt="">
  Смотреть возможности
</a>
<section id="features"></section>

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

Стрелка или шеврон в выпадающем списке?

Для селекта и аккордеона берите chevron-down. Полная arrow-down выглядит как навигация по странице.

Можно ли крутить стрелку через CSS вместо второго файла?

Да, для img это transform на самом img или обёртке. Цвет через img от родителя не наследуется: нужен файл нужного цвета или inline SVG.