devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt

Бесплатные иконки настроек (SVG)

48 бесплатных иконок настроек из наборов с открытым кодом — нажмите на любую, чтобы изменить размер, цвет и толщину обводки, и скопируйте её как SVG, JSX, data URI или CSS.

Обновлено

settings
Lucidesettings
Tablersettings
Iconoirsettings-16-filled
Fluent UIsettings
Material Symbolssettings
Material Design Iconssettings
Carbonsettings-2
Lucidesettings-filled
Tablerios-settings
Iconoirsettings-16-regular
Fluent UIsettings-outline
Material Symbolssettings-outline
Material Design Iconssettings-edit
Carbonsettings-2
Tablersettings-20-filled
Fluent UIsettings-outline-rounded
Material Symbolscar-settings
Material Design Iconssettings-view
Carbonsettings-x
Tablersettings-20-regular
Fluent UIsettings-rounded
Material Symbolssettings-off
Material Design Iconssync-settings
Carbonsettings-ai
Tablersettings-24-filled
Fluent UIsettings-cell
Material Symbolssettings-off-outline
Material Design Iconstask-settings
Carbonsettings-up
Tablersettings-24-regular
Fluent UIrule-settings
Material Symbolseye-settings
Material Design Iconsuser-settings
Carbonsettings-cog
Tablersettings-28-filled
Fluent UIrule-settings-rounded
Material Symbolseye-settings-outline
Material Design Iconssettings-off
Tablersettings-28-regular
Fluent UIbell-settings
Material Design Iconssettings-pin
Tablersettings-32-filled
Fluent UIbell-settings-outline
Material Design Iconsfile-settings
Tablersettings-32-light
Fluent UIbook-settings
Material Design Iconsfile-settings-filled
Tabler

Использование иконок настроек

Шестерёнка (cog) открывает настройки и параметры; иконка с ползунками — частая альтернатива для фильтров.

Все иконки здесь следуют currentColor, поэтому они берут цвет текста того элемента, в котором находятся: одна SVG работает и на светлом, и на тёмном фоне, в ссылках и в кнопках. Задайте явные width и height (или размер в CSS через 1em), чтобы верстка не сдвигалась во время загрузки страницы.

Доступность иконок

Если иконка декоративная или стоит рядом с видимым текстом, добавьте aria-hidden="true". Если она — единственное содержимое кнопки или ссылки, задайте этому элементу aria-label, например «Настройки».

Лицензии

Эти иконки настроек взяты из Lucide, Tabler, Iconoir, Fluent UI, Material Symbols, Material Design Icons и Carbon — наборов с открытым кодом под лицензиями MIT, ISC или Apache 2.0, которые разрешают личное и коммерческое использование. Нужно что-то другое? Ищите среди более чем 70 000 иконок в SVG Icon Finder.

Часто задаваемые вопросы

Можно ли использовать эти иконки настроек в коммерческих проектах бесплатно?
Да. Они взяты из наборов иконок с открытым кодом под лицензиями MIT, ISC или Apache 2.0, которые разрешают коммерческое использование. Если вы распространяете сами файлы иконок, сохраните уведомление о лицензии.
Как изменить цвет иконки настроек?
В SVG используется currentColor, поэтому задайте CSS-свойство color родительскому элементу — или откройте иконку в поиске и выберите фиксированный цвет перед копированием.
Можно ли использовать эти иконки в Webflow или React?
Да. Откройте иконку и используйте «Copy to Webflow» (вставит Code Embed) или «Copy JSX» для React-компонента.