Pixmora

Иконка шеврона для селекта и аккордеона

Шеврон вниз Lucide показывает, что список можно раскрыть. Пара вверх и двойной шеврон закрывают и сортируют без тяжёлой стрелки.

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

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

Шеврон вниз (chevron-down): Один угол вершиной вниз. Закрытый селект, аккордеон, «показать ещё».

Шеврон вверх (chevron-up): Угол вершиной вверх: блок уже открыт или сворачивается. Состояние «развёрнуто» у того же контрола.

Двойной шеврон (chevrons-up-down): Углы вверх и вниз вместе: выбор направления. Сортировка колонки или перестановка порядка.

В поле селекта 14–16 px. В заголовке аккордеона 18–20. Не ставьте 32: шеврон начнёт спорить с подписью пункта.

Это пример разметки без обработчиков. В проекте переключайте aria-expanded, hidden и клавиатуру. Путь к SVG замените. При раскрытии часто меняют на chevron-up отдельным src или поворотом.

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

Файлы SVG

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

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

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

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

<button type="button" aria-expanded="false" aria-controls="city-list">
  Город
  <img src="lucide-chevron-down.svg" width="16" height="16" alt="">
</button>
<ul id="city-list" hidden>
  <li>Москва</li>
</ul>

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

Нужно ли менять иконку при открытии?

Желательно: chevron-up или поворот на 180°. Состояние всё равно дублируйте в aria-expanded.

Чем шеврон отличается от arrow-down?

Шеврон компактнее и читается как «раскрыть здесь». Arrow-down чаще ведёт к другому месту на странице.