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

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

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

Обновлено

menu
Lucidemenu
Tablermenu-up
Bootstrap Iconsmenu
Iconoirmenu
Material Symbolsmenu
Material Design Iconsmenu
Carbonsquare-menu
Lucidemenu-2
Tablermenu-app
Bootstrap Iconsmenu-scale
Iconoirmenu-rounded
Material Symbolsmenu-up
Material Design Iconsoverflow-menu-vertical
Carbonmenu-2-filled
Tablermenu-app-fill
Bootstrap Iconsmenu-book
Material Symbolsmenu-up-outline
Material Design Iconsoverflow-menu-horizontal
Carbonmenu-3
Tablermenu-down
Bootstrap Iconsmenu-book-outline
Material Symbolsmenu-down
Material Design Iconsmenu-4
Tablermenu-button
Bootstrap Iconsmenu-book-outline-rounded
Material Symbolsmenu-down-outline
Material Design Iconsmenu-deep
Tablermenu-button-fill
Bootstrap Iconsmenu-book-outline-sharp
Material Symbolsmenu-left
Material Design Iconsmenu-order
Tablermenu-button-wide
Bootstrap Iconsmenu-book-rounded
Material Symbolsmenu-left-outline
Material Design Iconsmenu-button-wide-fill
Bootstrap Iconsmenu-book-sharp
Material Symbolsmenu-open
Material Design Iconsmenu-open
Material Symbolsmenu-swap
Material Design Iconsmenu-open-rounded
Material Symbolsmenu-swap-outline
Material Design Iconsmenu-book-2
Material Symbolsmenu-close
Material Design Iconsmenu-book-2-outline
Material Symbolsmenu-right
Material Design Iconsmenu-book-2-outline-rounded
Material Symbolsmenu-right-outline
Material Design Icons

Использование иконок меню

Трёхстрочный «гамбургер» открывает навигацию на телефонах; для открытого состояния используйте его вместе с иконкой закрытия (×).

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

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

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

Лицензии

Эти иконки меню взяты из наборов Lucide, Tabler, Bootstrap Icons, Iconoir, 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.