Pixmora

Иконка монитора для рабочего стола

Монитор Lucide с подставкой: рабочий стол, выключенный экран и успешная проверка. Рядом со смартфоном задаёт пару «десктоп / мобильный».

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

Сценарий страницы: Переключатель десктопного превью. Основной вариант - lucide:monitor, набор Lucide, автор Lucide Contributors, лицензия ISC.

Монитор (monitor): Широкий экран на ножке-подставке. Десктоп, рабочее место, превью компьютера.

Экран выключен (monitor-off): Монитор перечёркнут: нет сигнала или отключён. Статус «дисплей off» или недоступный экран.

Экран проверен (monitor-check): Галочка на экране: проверка или готовый дисплей. Успешный тест вывода или выбранный монитор.

В тулбаре 20 px. В блоке «системные требования» 24–32. Для пары monitor+smartphone держите одинаковый кегль.

Это пример разметки без обработчиков. Логику переключения превью подключите сами. В примере второй файл - smartphone из каталога; основной для этой страницы - lucide-monitor.svg.

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

Файлы SVG

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

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

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

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

<div class="preview-switch" role="group" aria-label="Тип превью">
  <button type="button" aria-pressed="true" aria-label="Версия для компьютера">
    <img src="lucide-monitor.svg" width="20" height="20" alt="">
  </button>
  <button type="button" aria-pressed="false" aria-label="Мобильная версия">
    <img src="lucide-smartphone.svg" width="20" height="20" alt="">
  </button>
</div>

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

Чем monitor отличается от laptop?

monitor - отдельный дисплей на подставке. laptop - ноутбук с клавиатурной базой.

Есть ли monitor-smartphone?

Да, в Lucide есть знак связки экранов. На этой странице фокус на самом мониторе.