HTML пиктограммы
Таблица популярных пиктограмм и иконок HTML с кодами
HTML-иконки и спецсимволы — каталог с копированием
Каталог HTML-символов, эмодзи и иконок с кодами для вставки в HTML, CSS и JavaScript. Кликните на символ — он скопируется в буфер обмена. Доступны HTML-entity, Unicode и CSS-код.
Более 2 000 символов: стрелки, звёзды, галочки, сердца, валюты, математические, технические, эмодзи. Поиск по названию и категории.
- 2 000+ символов и иконок
- HTML-entity (✔), Unicode (✔), CSS (¹4)
- Копирование в один клик
- Поиск по названию
- Категории: стрелки, звёзды, валюты и др.
Способы вставки символов
HTML-entity: ♥ или ♥ → ♥. В CSS: content: "¶5". В JavaScript: "♥". Все способы отображают один и тот же символ — выбирайте удобный.
Эмодзи: можно вставлять прямо в HTML как текст (🎉) или через код (🎉). Поддерживаются всеми современными браузерами. В CSS — через content: "F389".
Когда использовать символы вместо изображений
Символы Unicode — это текст, не картинки. Они масштабируются без потери качества, не требуют загрузки файлов, доступны для скринридеров и весят 0 КБ.
Используйте для: галочек (✓ ✔), крестиков (✗ ✘), стрелок (→ ← ↑ ↓), звёзд (★ ☆), сердец (♥ ❤), валют (₽ € $ ¥), математики (± × ÷ √). Для сложных иконок — SVG или иконочный шрифт.
Пример: чеклист на сайте
Дизайнер хочет добавить галочки в список преимуществ без иконочного шрифта.
Ищем «галочка» в каталоге → ✓ (✓) или ✔ (✔)
HTML: <span>✔</span> Быстрая доставка
CSS: li::before { content: "¹4"; color: green; }
Результат: ✔ Быстрая доставка — без картинок, 0 КБ, масштабируется
Чеклист из 5 пунктов с зелёными галочками. Без иконочного шрифта, без SVG, без загрузки изображений. Работает в любом браузере.
Знаете ли вы?
Unicode содержит 154 998 символов (v16.0, 2024). Из них ~3 700 — эмодзи. Первые эмодзи создал японец Сигэтака Курита в 1999 году для NTT DoCoMo — 176 иконок 12×12 пикселей.
Символ ♥ (сердце) — один из самых используемых в HTML. Его код — ♥ или ♥. В Unicode он с 1991 года (версия 1.0).
HTML-entities придумали для символов, которых нет на клавиатуре. & (амперсанд), < (меньше), > (больше) — спецсимволы HTML, их нельзя вставить как текст.
Эмодзи «слёзы радости» 😂 — самый используемый в мире. В 2021 году его отправляли 5% всех эмодзи-сообщений. На втором месте — ❤️.
Символ рубля ₽ добавлен в Unicode в 2014 году (v7.0). До этого его приходилось вставлять картинкой или шрифтом. Код: ₽ или &#8381;.
Шрифт Font Awesome содержит 2 000+ иконок как шрифт. Но один CSS-файл весит 60 КБ. Unicode-символы — бесплатно и 0 КБ. Для простых иконок Unicode выгоднее.
Популярные HTML-символы
| Символ | Название | HTML-entity | CSS-код |
|---|---|---|---|
| ✓ | Галочка | ✓ | ¹3 |
| ✗ | Крестик | ✗ | ¹7 |
| ★ | Звезда (закрашенная) | ★ | °5 |
| ♥ | Сердце | ♥ | ¶5 |
| → | Стрелка вправо | → | 92 |
| ₽ | Рубль | ₽ | BD |
| © | Копирайт | © | A9 |
| ± | Плюс-минус | ± | B1 |
Совет для разработчиков
Используйте Unicode-символы для простых иконок (галочки, стрелки, звёзды) — 0 КБ загрузки. Для сложных иконок (логотипы, детализированные) — SVG. Font Awesome оправдан, только если нужно 20+ разных иконок.
Как использовать
Найдите символ
По названию (поиск) или по категории (стрелки, звёзды, валюты).
Скопируйте код
Кликните — символ скопируется. Или скопируйте HTML-entity / CSS-код.
Вставьте в код
В HTML: ♥ или ♥. В CSS: content: "¶5". В JS: "♥".
Примеры
✅ Чеклист
✓ или ✔ перед каждым пунктом. CSS: li::before { content: "¹4"; }
⭐ Рейтинг
★★★★☆ — 4 из 5 звёзд. ★ = ★ ☆ = ☆.
→ Навигация
Далее → (→), Назад ← (←), Вверх ↑, Вниз ↓.
💰 Валюты
₽ (рубль), € (евро), $ (доллар), ¥ (йена), ₿ (биткоин).
Частые вопросы
Чем HTML-entity отличается от Unicode?
Все ли браузеры поддерживают Unicode?
Unicode или Font Awesome?
Данные отправляются на сервер?
Полезная информация
Каталог работает в браузере — данные не отправляются на сервер.
Все символы — стандартный Unicode. Работают в HTML, CSS, JavaScript, email и мессенджерах.
Комментарии (1)
🖼️Похожие инструменты
Таблица цветов Flat Design
Палитра из 140+ flat-цветов с копированием HEX, RGB, HSL и экспортом палитры
Таблица безопасных цветов
Интерактивная палитра 216 web-safe цветов с конвертацией HEX, RGB, HSL, CMYK
Просмотр HEX цвета
Визуализация HEX-кода, конвертация в RGB/HSL/CMYK, палитры и проверка контраста WCAG
Просмотр RGB цвета
Подбор цвета, конвертация RGB, HEX, HSL, CMYK, проверка контраста WCAG
Генератор цветов HTML
Подбор цвета, конвертация HEX/RGB/HSL/CMYK, гармонии, градиенты и проверка контраста WCAG
Конвертер цветов
Перевод цветов между HEX, RGB, HSL, HSV и CMYK с гармониями и проверкой контрастности
Совместимость цветов
Подбор цветовых гармоний, проверка контрастности WCAG и симуляция дальтонизма
Проверка контраста цветов
Проверьте контраст фона и текста по стандарту WCAG 2.1