HTML-иконки и эмодзи
Каталог из 2 400 эмодзи и пиктограмм с русскими названиями: одним нажатием копируется сам символ, числовой HTML-код, мнемоника, запись для CSS или JavaScript. Ищите по слову, коду или символу, собирайте набор для сайта и забирайте его одной строкой.
Популярные
каталог загружается…Набор для сайта
пусто: жмите плюс на плиткахКак записать символ: восемь способов и две ловушки
Любая запись из таблицы даёт один и тот же знак на странице; разница в том, где она переживёт копирование, рассылку и старые редакторы.
| Способ | Запись |
|---|---|
| Десятичный HTML-код | Амперсанд, решётка, номер знака в десятичной системе и точка с запятой: ✔ даёт ✔. Работает для любого знака Юникода и в любой кодировке страницы. |
| Шестнадцатеричный HTML-код | То же с буквой x и шестнадцатеричным номером: ✔. Совпадает с записью U+2714 из таблиц Юникода, поэтому удобнее сверять. |
| Мнемоника HTML5 | Имя вместо номера: ♥ даёт ♥, → стрелку вправо. Таких имён около двух тысяч, у эмодзи их нет; каталог показывает мнемонику в карточке, где она есть. |
| CSS content | Обратная косая черта и шестнадцатеричный код внутри кавычек: content: "\2714 " в правиле для ::before. У составных эмодзи коды идут подряд: "\1F468\200D\1F4BB". |
| JavaScript | Экран \u2714 для знаков до FFFF и \u{1F525} для остальных; в старом синтаксисе знак за пределами BMP записывается суррогатной парой из двух \u. |
| Сам символ | Вставить знак как текст: файл должен быть сохранён в UTF-8, а у страницы объявлена кодировка. Так делают в современных редакторах, коды нужны там, где текст проходит через старые системы и рассылки. |
| Селектор FE0F | Знаки с текстовым видом по умолчанию, ☎ или ✂, становятся цветными эмодзи с добавкой ️. В каталоге код таких знаков уже включает селектор. |
| Соединитель ZWJ | Профессии, семьи и флаги собираются из нескольких знаков через ‍: 👨💻 это человек, соединитель и ноутбук. Копируйте код целиком, иначе выйдут отдельные картинки. |
Один знак, четыре записи, и из чего собирается составное эмодзи
Что в каталоге и как копировать
В каталоге 2 398 знаков: 1 898 эмодзи стандарта Unicode 15.1 без вариантов оттенка кожи и 500 пиктограмм без эмодзи-вида, от стрелок и галочек до шахматных фигур, нот и цифр в кружках. Русские имена и ключевые слова взяты из CLDR, поэтому поиск понимает «сердечко», «галочка» и «ракета», английское имя вроде check mark, код 2714 и сам символ из буфера обмена.
На каждой плитке две кнопки: «Знак» копирует сам символ, «Код» копирует запись в выбранном формате: десятичный HTML-код, шестнадцатеричный, CSS content или JavaScript. Карточка знака раскрывает всё разом: номер в Юникоде, оба HTML-кода, мнемонику HTML5, где она есть, запись для CSS и JS, URL-кодирование, байты UTF-8, версию эмодзи с годом появления и пометки про селектор цветного вида и соединитель составных картинок.
Плюс на плитке собирает набор: галочки для списка преимуществ, стрелки для кнопок, иконки для контактов. Набор копируется символами, HTML-кодами, готовыми CSS-правилами с классами icon-1, icon-2 и так далее или HTML-списком и хранится в браузере до кнопки «Очистить». У каждого из 2 398 знаков есть своя страница с готовыми фрагментами для HTML, CSS и JavaScript, вариантами оттенка кожи и похожими знаками; ссылка стоит на имени плитки.
| Запись | Где работает | Когда брать |
|---|---|---|
| Сам символ | страницы и файлы в UTF-8 | по умолчанию в современных редакторах |
| Числовой HTML-код | любая кодировка, рассылки, старые CMS | когда знак портится при копировании |
| Мнемоника | около двух тысяч знаков HTML5 | ради читаемости кода: hearts, rarr, copy |
| CSS content | псевдоэлементы ::before и ::after | маркеры и иконки без правки HTML |
История: от иероглифов и типографских орнаментов до эмодзи
Знак вместо слова старше письменности: египетские иероглифы уже были и картинками, и буквами, а типографы XVIII века отливали из металла орнаменты и указатели, которые набирались вместе с текстом. Каталог словолитни Фрая и Стила 1794 года показывает сотни таких литер, и именно от них идут дингбаты: набор Германа Цапфа 1978 года со звёздочками, галочками и стрелками попал в Юникод отдельным блоком, откуда взяты ✔, ✂ и ✈.
Юникод появился в 1991 году как единая таблица знаков для всех письменностей, а HTML в 1995-м получил мнемоники для символов, которых нет на клавиатуре. Эмодзи родились в Японии: в 1995 году пейджеры NTT DoCoMo умели отправлять сердечко, а в 1999-м Сигэтака Курита нарисовал для мобильного интернета i-mode 176 картинок размером 12 на 12 точек. Операторы делали несовместимые наборы, и в 2010 году Unicode 6.0 включил эмодзи в стандарт: с тех пор один код означает одну картинку на любом устройстве, а рисует её шрифт системы.
Дальше набор рос каждый год: составные эмодзи через соединитель нулевой ширины, оттенки кожи в 2015-м, флаги регионов, профессии и семьи. В Emoji 15.1 около 3 800 полностью описанных знаков, из них почти половина вариантов оттенка кожи; каталог берёт остальные и добавляет пиктограммы, которые эмодзи никогда не были.
Как пользоваться и чего не делать
Начните с поиска или темы: без запроса открыты популярные знаки, в темах эмодзи разложены по подгруппам Юникода, пиктограммы без эмодзи-вида собраны в девять наборов. Переключатель над сеткой задаёт, что копирует кнопка «Код»; для страниц в UTF-8 обычно достаточно самого символа, коды нужны рассылкам, старым редакторам и тем случаям, когда знак портится при вставке.
Откройте карточку знака, если нужна мнемоника, запись для CSS или JavaScript либо год появления: свежие эмодзи на старых системах выходят пустыми квадратами, а знаки вроде телефона или ножниц без селектора FE0F остаются чёрно-белыми. Для типографики, валют и математики рядом лежит таблица HTML-символов, для перевода готового текста в сущности и обратно HTML-сущности, а разобрать чужую строку по кодам умеет инспектор Unicode.
| Знаков | 2 398 |
| Эмодзи | 1 898, Unicode 15.1 |
| Пиктограмм без эмодзи | 500 в девяти наборах |
| Имена и ключевые слова | CLDR, локаль ru |
| Мнемоники HTML5 | у 110 знаков каталога |
| Форматы кода | десятичный, шестнадцатеричный, CSS, JS |
| Набор | в localStorage, четыре способа копирования |
| Данные на сервер | не уходят |
Проверяйте набор на живой странице: эмодзи рисует шрифт устройства, поэтому одна и та же ракета у Apple, Google и Windows выглядит по-разному, а в заголовках и метаописаниях декоративные знаки лучше не ставить: в поисковой выдаче они отображаются нестабильно. Для смысловых знаков добавляйте текстовую подпись через aria-label, декоративные скрывайте от экранных дикторов атрибутом aria-hidden, иначе диктор прочитает «жирная галочка» после каждого пункта списка.
Как пользоваться
- Введите слово по-русски или по-английски, код вроде 2714 или сам символ. Без запроса открыты популярные знаки, слева темы: смайлы, люди, природа, еда, места, предметы, знаки, флаги и девять наборов пиктограмм без эмодзи.
- Кнопка «Знак» кладёт в буфер сам символ, кнопка «Код» — запись в выбранном формате: десятичный HTML-код, шестнадцатеричный, CSS content или JavaScript. Переключатель формата стоит над сеткой.
- Нажмите на плитку: в карточке все записи знака, от U+ и мнемоники HTML5 до URL-кодирования и байтов UTF-8, версия эмодзи с годом и пометка, нужен ли селектор цветного вида. У каждого знака есть и своя страница с готовыми фрагментами кода, вариантами и похожими знаками, ссылка стоит на имени плитки.
- Плюс на плитке добавляет знак в набор внизу. Набор копируется символами, HTML-кодами, готовыми CSS-правилами для ::before или HTML-списком и хранится в браузере до кнопки «Очистить».
Частые вопросы
Как вставить эмодзи или символ в HTML
Проще всего вставить сам знак: страницы в UTF-8 понимают его без кодов. Если редактор или почтовая рассылка портят символы, берите числовой код, десятичный или шестнадцатеричный, они выглядят как амперсанд, решётка, номер и точка с запятой. Мнемоники вроде hearts или rarr есть только у двух тысяч знаков из стандарта HTML5, у эмодзи их нет, поэтому кнопка «Код» по умолчанию копирует десятичную запись.
Как поставить символ через CSS
Через свойство content у псевдоэлементов ::before и ::after: обратная косая черта и шестнадцатеричный код, например галочка записывается как обратная косая черта и 2714. После кода ставьте пробел или закрывайте кавычку, иначе следующая буква прилипнет к коду. Карточка знака и кнопка «CSS-правила» у набора дают готовую запись.
Почему эмодзи выглядит по-разному или показывается квадратом
Эмодзи рисует шрифт устройства: у Apple, Google, Samsung и Windows свои картинки, поэтому один код выглядит по-разному. Пустой квадрат означает, что шрифт не знает знак: чаще всего это новые эмодзи на старой системе. Год появления указан в карточке, для сайта безопаснее знаки до Emoji 12. Знаки вроде телефона или ножниц по умолчанию чёрно-белые, цветной вид просит селектор FE0F, он входит в код на карточке.
Чем каталог отличается от таблицы HTML-символов
Здесь пиктограммы и эмодзи по темам: стрелки, галочки, смайлы, предметы, флаги, две с половиной тысячи знаков с поиском по-русски и набором для сайта. Таблица HTML-символов на сайте закрывает другую задачу: типографика, валюты, математика, греческие буквы и экранирование текста.
Как искать нужный знак
Поле поиска понимает русское имя из стандарта Юникода и его ключевые слова из CLDR, например «сердечко» найдёт сердца, английское имя вроде check mark, шестнадцатеричный или десятичный код и сам символ, вставленный из буфера. Найденные знаки показываются плитками, до трёхсот за раз.
Зачем набор и куда он сохраняется
Набор нужен, когда для сайта требуется несколько знаков сразу: галочки для списка преимуществ, стрелки для кнопок, иконки контактов. Он копируется символами, кодами, CSS-правилами с классами icon-1, icon-2 и так далее или готовым HTML-списком. Хранится в localStorage этого браузера, на сервер не уходит.
Данные куда-то отправляются
Нет. Каталог загружается одним файлом, поиск, копирование и набор работают в браузере. Недавние копирования и набор лежат только на этом устройстве.
Похожие инструменты
Все коды состояния от 100 до 511 с расшифровкой по-русски, что каждый значит для пользователя, поисковика и разработчика; поиск по номеру.
ОткрытьСписок портов TCP и UDPРазбор номера порта: служба, протокол, диапазон и нужны ли права root. Таблица ходовых портов с пояснениями по-русски и весь well-known диапазон 0–1023 из реестра IANA с поиском.
ОткрытьГенератор cron-выраженийСобирает строку crontab по расписанию и расшифровывает готовую по-русски. Показывает ближайшие запуски и предупреждает о ловушках.
ОткрытьКоды клавиш JavaScriptНажмите клавишу — увидите event.key, code, keyCode, which и модификаторы; таблица кодов всех клавиш для обработчиков keydown.
ОткрытьГенератор UUIDВерсии 4 и 7 пачками, пять форматов записи и разбор готового идентификатора с датой создания для v7.
ОткрытьRAID-калькуляторПолезный объём и отказоустойчивость RAID 0, 1, 5, 6 и 10 по числу и размеру дисков, доля избыточности, ТБ и ТиБ.
ОткрытьЕщё инструменты для кода и данных
Base64 и URL, форматтер и сравнение JSON, хеши, регулярные выражения, cron, подсети, UUID, QR-код и Unix-время — в разделе 45 инструментов.