Pixmora

Иконка сетки для каталога плиткой

Сетка Lucide из четырёх ячеек включает плиточный вид. Рядом макет «превью и строки» и неравномерный дашборд, если речь не о простом каталоге.

Как применить иконку «Четыре плитки»

Сценарий страницы: Каталог плиткой. Основной вариант - lucide:layout-grid, набор Lucide, автор Lucide Contributors, лицензия ISC.

Четыре плитки (layout-grid): Два на два равных скруглённых прямоугольника. Каталог карточек, галерея, равномерная сетка.

Превью и строки (layout-list): Квадраты слева и широкие полосы текста справа. Гибридный список с миниатюрами, не чистая сетка.

Дашборд (layout-dashboard): Блоки разной высоты: обзор панелей, не витрина товаров. Админка, сводка виджетов.

В тулбаре вида 18–20 px. На пустом состоянии «нет плиток» можно 48 как иллюстрацию. Внутри карточки товара сетка как иконка действия обычно не нужна.

Это пример разметки без обработчиков. Свяжите aria-pressed с реальным CSS-классом сетки в проекте. Путь к SVG замените. Для пары со списком см. тему list.

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

Файлы SVG

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

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

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

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

<button type="button" aria-pressed="true" aria-label="Вид плиткой">
  <img src="lucide-layout-grid.svg" width="20" height="20" alt="">
</button>

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

Почему не table?

Таблица про строки и колонки данных. layout-grid про карточки и визуальную сетку.

Достаточно ли иконки без подписи «Плитка»?

В паре с list часто да, если есть aria-label. В одиночной кнопке без соседа подпись безопаснее.