Иконка списка для смены представления

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

Список Lucide показывает строчное представление данных. Рядом нумерация и чек-лист, если важен порядок или выполнение задач, а не просто «вид списком».

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

Маркированный список (list): Точки слева и три текстовые линии. Вид «списком» в каталоге или пункт «список» в редакторе.

Нумерованный список (list-ordered): Слева знаки порядка, справа строки. Пошаговые инструкции, рейтинг, порядок очереди.

Список с галочками (list-checks): Галочки у части строк: чек-лист. Задачи, пакет услуг «что входит», выбор нескольких пунктов.

В сегменте переключения вида 18–20 px. В редакторе текста для «маркированный список» 16. Не смешивайте в одной кнопке list и layout-grid.

Это пример разметки без обработчиков. Обновление aria-pressed и самого вида карточек сделайте в коде проекта. Пути к SVG замените. Обе кнопки type="button".

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

Файлы SVG

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

• Скачать SVG Маркированный список (lucide-list.svg)
• Скачать SVG Нумерованный список (lucide-list-ordered.svg)
• Скачать SVG Список с галочками (lucide-list-checks.svg)

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

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

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

<div role="group" aria-label="Вид каталога">
  <button type="button" aria-pressed="true" aria-label="Вид списком">
    <img src="lucide-list.svg" width="20" height="20" alt="">
  </button>
  <button type="button" aria-pressed="false" aria-label="Вид плиткой">
    <img src="lucide-layout-grid.svg" width="20" height="20" alt="">
  </button>
</div>

Это пример разметки без обработчиков. Обновление aria-pressed и самого вида карточек сделайте в коде проекта. Пути к SVG замените. Обе кнопки type="button".

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

list или layout-list?

list - абстрактные строки с маркерами. layout-list в Lucide ближе к плиткам-превью слева и тексту справа. Для тумблера «список или сетка» чаще pair list и layout-grid.

Как подписать переключатель для скринридера?

Каждой кнопке своё имя: «Вид списком», «Вид плиткой». Группу оберните в role="group" с общим aria-label.