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

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

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

Обновлено

bookmark
Lucidebookmark
Tablerbookmark
Heroiconsbookmark
Phosphorbookmark
Bootstrap Iconsbookmark
Iconoirbookmark-12-filled
Fluent UIbookmark
Material Symbolsbookmark
Material Design Iconsbookmark
Carbonbookmark-x
Lucidebookmark-filled
Tablerbookmark-16-solid
Heroiconsbookmark-bold
Phosphorbookmark-fill
Bootstrap Iconsbookmark-solid
Iconoirbookmark-12-regular
Fluent UIbookmark-outline
Material Symbolsbookmark-outline
Material Design Iconsbookmark-filled
Carbonbookmark-off
Lucidebookmark-ai
Tablerbookmark-20-solid
Heroiconsbookmark-duotone
Phosphorbookmark-x
Bootstrap Iconsbookmark-book
Iconoirbookmark-16-filled
Fluent UIbookmark-outline-rounded
Material Symbolsbookmark-box
Material Design Iconsbookmark-add
Carbonbook-bookmark
Lucidebookmark-off
Tablerbookmark-solid
Heroiconsbookmark-fill
Phosphorbookmark-x-fill
Bootstrap Iconsbookmark-16-regular
Fluent UIbookmark-outline-sharp
Material Symbolsbookmark-box-outline
Material Design Iconsbookmark-plus
Lucidebookmark-edit
Tablerbookmark-light
Phosphorbookmark-dash
Bootstrap Iconsbookmark-20-filled
Fluent UIbookmark-rounded
Material Symbolsbookmark-off
Material Design Iconsbookmark-plus
Tablerbookmark-thin
Phosphorbookmark-dash-fill
Bootstrap Icons

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

Закладки позволяют сохранять элементы, чтобы прочитать их или использовать позже.

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

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

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

Лицензии

Эти иконки закладок взяты из наборов Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, 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?
Да. Откройте иконку и выберите «Копировать для Webflow» (вставит Code Embed) или «Копировать JSX» для React-компонента.