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

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

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

Обновлено

shield-close
Lucidetab-close
Tablereye-closed
Iconoirpane-close-24-filled
Fluent UIclose
Material Symbolsclose
Material Design Iconsclose
Carbonpanel-top-close
Lucideweb-window-close
Iconoirpane-close-24-regular
Fluent UIclose-rounded
Material Symbolsclose-outline
Material Design Iconsclose-filled
Carbonpanel-left-close
Lucideshare-close-tray-20-filled
Fluent UItab-close
Material Symbolsclose-box
Material Design Iconsclose-outline
Carbonpanel-right-close
Lucideshare-close-tray-20-regular
Fluent UItab-close-outline
Material Symbolsclose-box-outline
Material Design Iconsclose-large
Carbonshare-close-tray-24-filled
Fluent UItab-close-outline-rounded
Material Symbolsmenu-close
Material Design Iconsside-panel-close
Carbonshare-close-tray-24-regular
Fluent UItab-close-outline-sharp
Material Symbolsclose-thick
Material Design Iconsside-panel-close-filled
Carbontab-close-rounded
Material Symbolsclose-circle
Material Design Iconsright-panel-close
Carbontab-close-sharp
Material Symbolsclose-circle-outline
Material Design Iconsright-panel-close-filled
Carbonclose-small
Material Symbolswindow-close
Material Design Iconsclose-small-outline
Material Symbolsclose-network
Material Design Iconsclose-small-outline-rounded
Material Symbolsclose-network-outline
Material Design Iconsclose-small-rounded
Material Symbolsclose-octagon
Material Design Iconstab-close-right
Material Symbolsclose-octagon-outline
Material Design Iconstab-close-right-outline
Material Symbols

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

Значок «×» закрывает диалоговые окна, скрывает уведомления и очищает поля ввода; задайте кнопке видимое состояние фокуса и aria-label.

Все иконки здесь следуют 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-компонента.