Pixmora

Иконка телефона для кнопки звонка

Три варианта Lucide для связи: обычная трубка, активный звонок с сигналом и входящий вызов. Ниже пример разметки кнопки с ссылкой tel: и подписью для скринридера.

Как применить иконку «Трубка»

Сценарий страницы: Кнопка звонка, ссылка tel и доступная подпись. Основной вариант - lucide:phone, набор Lucide, автор Lucide Contributors, лицензия ISC.

Трубка (phone): Классическая трубка без дополнительных стрелок. Общий контактный блок, когда не важно состояние вызова.

Активный звонок (phone-call): У трубки есть дуги сигнала: идёт активный разговор, а не просто контактный знак трубки. Статус «сейчас на линии» или индикатор активного звонка.

Входящий звонок (phone-incoming): Стрелка к трубке показывает входящий вызов. Уведомление о входящем звонке или история входящих.

В кнопке интерфейса обычно 16 или 24 px. Для крупной плавающей кнопки на мобильном экране берите 32 или 48. PNG на 128+ имеет смысл только если нужен растр для письма или баннера; для сайта удобнее SVG.

Это пример разметки без обработчиков. Номер +70000000000 демонстрационный: замените на свой в международном формате. Путь к SVG замените на скачанный файл. Декоративное изображение с пустым alt, смысл передаёт текст «Позвонить»; без текста задайте aria-label на ссылке.

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

Файлы SVG

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

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

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

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

<a href="tel:+70000000000" class="call-button">
  <img src="lucide-phone.svg" width="24" height="24" alt="">
  <span>Позвонить</span>
</a>

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

Нужна ли отдельная иконка для мобильной версии?

Нет. Один SVG масштабируется через width и height или CSS. Цвет: через img цвет родителя не наследуется, скачайте файл с нужным цветом; для inline SVG удалите или переопределите атрибут color у корневого svg и используйте CSS color с currentColor в обводке.

Как сделать, чтобы по нажатию открывался набор номера?

В разметке используйте ссылку tel: со своим номером. Логику и стили кнопки подключите в проекте отдельно: пример выше только показывает структуру.