Pixmora

Иконка настроек приложения

Шестерёнка Lucide ведёт в параметры. Рядом варианты с двумя регулировками и полосами слайдеров, если нужен акцент на тонкой настройке, а не на общем экране.

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

Сценарий страницы: Параметры приложения. Основной вариант - lucide:settings, набор Lucide, автор Lucide Contributors, лицензия ISC.

Шестерёнка (settings): Зубчатое колесо: общий вход в параметры. Пункт настроек аккаунта или приложения.

Две регулировки (settings-2): Две горизонтали с кружками-бегунками на разных уровнях. Экран, где сразу видны несколько переключаемых опций.

Полосы слайдеров (sliders-horizontal): Несколько горизонтальных линий с ползунками. Фильтры диапазона, эквалайзер, тонкая подстройка значений.

В шапке 24 px. В меню профиля рядом с текстом «Настройки» 16–20. Не анимируйте вращение постоянно: это отвлекает и не заменяет статус сохранения.

Это пример разметки без обработчиков. Подставьте свой URL раздела параметров и путь к SVG. Если в шапке только шестерёнка, aria-label обязателен.

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

Файлы SVG

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

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

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

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

<a href="/settings" aria-label="Настройки">
  <img src="lucide-settings.svg" width="24" height="24" alt="">
</a>

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

settings или sliders-horizontal в фильтрах каталога?

Для «Параметры аккаунта» - settings. Для набора ползунков цены и размера - sliders-horizontal или отдельная иконка фильтра.

Можно ли красить шестерёнку через CSS у img?

Цвет родителя через img не наследуется. Скачайте SVG нужного цвета или вставьте inline и задайте color для currentColor в обводке.