Pixmora

Иконка почты для письма и mailto

Варианты конверта Lucide для контактов и статусов письма. Ниже пример разметки ссылки mailto и подпись для доступности.

Как применить иконку «Закрытый конверт»

Сценарий страницы: Письмо, конверт и ссылка mailto. Основной вариант - lucide:mail, набор Lucide, автор Lucide Contributors, лицензия ISC.

Закрытый конверт (mail): Нейтральный знак электронной почты. Контакты, форма обратной связи, пункт меню «Почта».

Открытое письмо (mail-open): Конверт раскрыт, акцент на прочитанном или открытом сообщении. Статус «прочитано» или раздел входящих.

Письмо доставлено (mail-check): Конверт с галочкой: подтверждение отправки или проверки. Успешная отправка формы или подтверждённый адрес.

Рядом с адресом электронной почты достаточно 16–24 px. В пустом состоянии списка писем уместны 32–48. Для превью в админке можно отдать PNG 64 или 128.

Это пример разметки без обработчиков. Замените адрес mailto и путь к SVG на свои. Текст ссылки должен говорить о действии, а не только «иконка».

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

Файлы SVG

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

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

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

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

<a href="mailto:hello@example.com">
  <img src="lucide-mail.svg" width="24" height="24" alt="">
  Написать письмо
</a>

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

Чем mail отличается от send?

mail обозначает ящик или адрес. Для кнопки «Отправить» в форме чаще берут иконку отправки, а не конверт.

Можно ли красить SVG через CSS?

Через img src цвет родителя не наследуется: скачайте SVG уже с нужным цветом. Если вставляете код inline, удалите или переопределите атрибут color у корневого svg и задайте CSS color: обводка Lucide использует currentColor.