Pixmora

Иконка внешней ссылки

Знак Lucide с квадратом и стрелкой наружу предупреждает: документ откроется вне текущего раздела. Это не обычная стрелка «далее» внутри сайта.

Как применить иконку «Внешняя ссылка»

Сценарий страницы: Открытие внешнего ресурса. Основной вариант - lucide:external-link, набор Lucide, автор Lucide Contributors, лицензия ISC.

Внешняя ссылка (external-link): Квадрат окна и стрелка наружу вверх-вправо. Ссылка на другой домен, справку или личный кабинет вне раздела.

Стрелка из квадрата (square-arrow-out-up-right): Акцент на выходе стрелки из рамки, близкий смысл «наружу». Панель действий, где нужен тот же уход вовне в стиле квадратных кнопок.

Диагональ вверх-вправо (arrow-up-right): Только стрелка без квадрата: слабее намекает на «чужой» ресурс. Лёгкая отсылка «подробнее», если рамка окна не нужна.

Рядом с текстом ссылки 14–16 px. В таблице документов 16–20. Не увеличивайте до размера основной CTA: это маркер типа ссылки.

Это пример разметки без обработчиков. Подставьте свой URL. rel="noopener noreferrer" уместен при target="_blank"; сам по себе SVG безопасность не обеспечивает. Путь к файлу замените. Иконка декоративная рядом с текстом ссылки.

Лицензия ISC: https://github.com/lucide-icons/lucide/blob/main/LICENSE. Полный текст лицензии добавляется в metadata скачиваемого SVG.

Файлы SVG

Стандартные SVG с полным текстом лицензии ISC в metadata. Отдельных страниц под размер и цвет нет. PNG с выбранным размером и цветом готовится в браузере и требует JavaScript.

Полный текст лицензии ISC

Пример разметки

Доступная подпись: Открыть внешний сайт. Имя файла в примере совпадает с основным вариантом; при смене варианта замените путь на скачанный файл.

<a href="https://example.com" rel="noopener noreferrer">
  Документация API
  <img src="lucide-external-link.svg" width="16" height="16" alt="">
</a>

Частые вопросы

Обязательна ли иконка на каждой внешней ссылке?

Нет. Ставьте, когда важно заранее показать уход с раздела. Текст ссылки всё равно должен быть понятным.

Заменяет ли иконка атрибут rel?

Нет. Пиктограмма только поясняет интерфейс. Поведение вкладки и безопасность задают разметка и сервер, не SVG.