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

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

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

Обновлено

link
Lucidelink
Tablerlink
Heroiconslink
Phosphorlink
Bootstrap Iconslink
Iconoirlink-12-filled
Fluent UIlink
Material Symbolslink
Material Design Iconslink
Carbonlink-2
Lucidelink-filled
Tablerlink-16-solid
Heroiconslink-bold
Phosphorlink-12-regular
Fluent UIlink-rounded
Material Symbolskey-link
Material Design Iconsbpmn-link-fill
Carbonlink-off
Tablerlink-20-solid
Heroiconslink-duotone
Phosphorlink-16-filled
Fluent UIlink-2
Material Symbolslink-box
Material Design Iconsbpmn-link-outline
Carbonhome-link
Tablerlink-solid
Heroiconslink-fill
Phosphorlink-16-regular
Fluent UIlink-2-rounded
Material Symbolslink-box-outline
Material Design Iconscopy-link
Carbonlink-plus
Tablerlink-light
Phosphorlink-20-filled
Fluent UIadd-link
Material Symbolslink-off
Material Design Iconsjump-link
Carbonlink-thin
Phosphorlink-20-regular
Fluent UIadd-link-rounded
Material Symbolsfile-link
Material Design Iconstext-link
Carbonlink-24-filled
Fluent UIlink-off
Material Symbolsfile-link-outline
Material Design Iconslink-24-regular
Fluent UIlink-off-rounded
Material Symbols

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

Звенья цепи обозначают гиперссылки, кнопки «Копировать ссылку» и подключённые аккаунты.

Все иконки здесь наследуют 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?
Да. Откройте иконку и используйте «Copy to Webflow» (вставит Code Embed) или «Copy JSX» для компонента React.