HTML пиктограммы

Каталог из 1 100+ HTML-символов, спецзнаков и эмодзи с готовыми кодами для вставки в HTML, CSS и JavaScript. Кликните на нужный символ — его код или сам символ скопируются в буфер обмена. Работает в браузере без серверной обработки.

Доступны три формата: сам Unicode-символ (✔), HTML-entity (✔) и поименованное entity, где есть (♥, ©, →). Все три способа отображают одинаковый знак — выбирайте удобный для вашего проекта.

Первый способ — поименованный HTML-entity: © → ©, ♥ → ♥, → → →, & → &. Понятно по названию, но работает только для ~250 спецсимволов из стандарта HTML5.

Второй — десятичный entity: ♥ → ♥, € → €. Подходит для любого Unicode-символа. Цифры — это десятичный код символа в таблице Unicode.

Третий — шестнадцатеричный entity: ♥ → ♥, € → €. То же самое в hex (часто короче и совпадает с U+ нотацией Unicode).

Четвёртый — сам символ в коде: вставляете прямо в HTML или JS-строку ♥. Работает, если файл сохранён в UTF-8 (стандарт всех современных IDE).

В CSS Unicode-символы вставляют через свойство content в псевдоэлементах ::before и ::after. Запись через обратный слэш и hex-код символа: li::before { content: "\2714 "; color: #16a34a; } даст зелёную галочку перед каждым пунктом списка.

Важно: после кода всегда ставится пробел или точка с запятой — иначе следующая буква может прилипнуть к коду. Например, "\2714 Готово" — правильно, "\2714Готово" — может сломаться.

Альтернатива — сразу вставить символ как текст: content: "✔". Работает в файлах в UTF-8 (для большинства проектов — норма).

Эмодзи (🎉, 😂, 👨‍🚀) — это часть Unicode. Их можно вставлять как обычный текст или через entity: 🎉 → 🎉, 😂 → 😂. Поддерживаются всеми браузерами с iOS 6 / Android 4.4 / Windows 8.1.

Сложные эмодзи (флаг радуги 🏳️‍🌈, профессии 👨‍💻, разные оттенки кожи) собираются из нескольких символов через ZWJ (Zero Width Joiner, ‍). Например, 🏳️‍🌈 = 🏳‍🌈 — белый флаг + ZWJ + радуга.

Если эмодзи отображается квадратом ▢ — на устройстве нет соответствующего шрифта. На сервере подключите Twemoji или Noto Emoji через CDN для одинакового вида у всех пользователей.

Unicode-символы (✔ ★ → ♥): 0 КБ загрузки, работают везде, поддаются стилизации цветом и размером. Минус — ограниченный набор и стиль зависит от шрифта пользователя.

Иконочный шрифт (Font Awesome, Material Icons): 50–80 КБ на CSS + шрифт. Единый стиль, тысячи иконок. Оправдан при 20+ разных иконках на сайте.

SVG-иконки: можно вставить inline (нулевая задержка) или как файл. Полный контроль над дизайном, идеальное качество на Retina, но нужно больше кода в HTML. Лучший выбор для брендовых и сложных иконок.

Правило: для простых маркеров (галочки, стрелки, звёзды рейтинга, чекбоксы) — Unicode. Для большого набора плоских иконок — шрифт или SVG-спрайт. Для логотипов и иллюстраций — SVG.

Скринридеры читают Unicode-символы по их официальным названиям. ✓ озвучивается как «check mark», ★ — «black star», ♥ — «heavy black heart». Если символ декоративный, оберните его в <span aria-hidden="true">✓</span>, чтобы скринридер пропустил его и не повторял после текста.

Если символ несёт смысл (например, ✓ = «выполнено»), добавьте текстовую альтернативу: <span aria-label="выполнено">✓</span>. Это полезно и для SEO — поисковики не индексируют декоративные символы.

В заголовках страниц и meta-описаниях лучше избегать декоративных Unicode-символов (✅ ⭐ 🔥): они часто отображаются по-разному в выдаче Яндекса и Google, а на некоторых устройствах превращаются в пустые квадраты.