В этой заметке речь пойдет об универсальных Unicode-символах. Иконках, которые понимают все браузеры и системы.
Для того чтобы использовать иконки в HTML коде (верстке), обычно устанавливаются пакеты иконок на базе шрифтов, например Font Awesome. Однако, часто удобнее вставить известный браузеру Unicode-символ и не подключать лишние шрифты. Рассмотрим такие символы в этой заметке.
В браузерах есть встроенные библиотеки доступных иконок и иероглифов. Доступны они в Unicode формате — это стандарт, который присваивает уникальный идентификатор для каждого специального символа. Число таких символов (иконок, значков) постоянно растет и сегодня их более 110 000 . Но браузеры понимают не все такие символы. Браузеры работают на базе иконок которые доступны в вашей системе: Windows, Linux, OS X, Android и iOS.
В этой заметке собраны иконки, которые установлены во всех системах, а значит можно сказать что они универсальные и их в 99% случаев их поймет и отобразит любой браузер (однако не всегда они будут выглядеть одинаково).
Как использовать Unicode символы
Значки, приведенные в таблицах ниже, являются обычными символами, которые можно копировать и вставлять, как если бы они были буквами текста. Однако, если кодировка файла (HTML/CSS) куда вставляется скопированный значок не UTF-8 вставленный значок отображаться не будет, более того — он потеряется. Для таких случаев в таблице приведён HTML код знака.
Что нужно сделать, чтобы использовать иконки:
Найти нужный значок.Скопировать иконку или её код.Вставить скопированное в HTML/JS/PHP как обычный текст. В CSS его можно использовать в качестве значения свойства content:'★';, или как код content:'\2605';.
Использование кода иконки в разных языках. Например UTF8 код ◑ = 25D1, тогда:
CSS \25D1
JavaScript / JSON \u25D1
C / C++ / Java / Python \u25D1
Perl \x{25D1}
Ruby \u{25D1}
Значки по сути являются обычным текстом, поэтому им можно указать стили текста: тень, размер, цвет и т.д.
Иконка
Decimal
Entity
css
Название
«
««\00ABКавычки слева
»
»»\00BBКавычек справа
‘
‘‘\2018Открывающая одинарная кавычка
’
’’\2019Закрывающая одинарная кавычка
‚
‚‚\201AНижняя одинарная кавычка
“
““\201CОткрывающая двойная кавычка
”
””\201DЗакрывающая двойная кавычка
„
„„\201EНижняя двойная кавычка
′
′′\2032Штрих, минуты, лапка
″
″″\2033Двойной штрих
‴
‴-
\2034Тройной штрих
Иконка
Decimal
Entity
css
Название
№
№-
\2116Номер
©
©©\00A9Авторское право
®
®®\00AEЗарегистрированный
™
™™\2122Товарный знак
℮
℮-
\212EПредполагаемый
·
··\00B7Средняя Точка (Маркер списка)
•
••\2022Точка
■
■-
\25A0Черный квадрат
□
□-
\25A1Белый квадрат
—
——\2014Длинное тире
‰
‰‰\2030Знак промилле
…
……\2026Многоточие
¶
¶¶\00B6Знак абзаца
Иконка
Decimal
Entity
css
Название
☺
☺\263AУлыбка
♨
♨\2668Хот-спрингс
➑
➑\27918-мяч
☆
☆\2606Белая звезда
★
★\2605Черная звезда
✪
✪\272AБелая звезда обведенная
✰
✰\2730Белая звезда
✧
✧\2727Белая четырехконечная звезда
✦
✦\2726Черная четырехконечная звезда
♡
♡\2661Белое сердце
❤
❤\2764Черное сердце
✈
✈\2708Самолет
✂
✂\2702Черные ножницы
✄
✄\2704Белые ножницы
♕
♕\2655Корона
✝
✝\271DКрест
†
††\2020Кинжал
‡
‡‡\2021Двойной Кинжал
◑
◑\25D1Черно-белый круг
♪
♪\266AНота
♫
♫\266BНоты
✣
✣\2723Четыре звездочки с шарами
☑
☑\2611Чекбокс с галочкой
✔
✔\2714Галочка (heavy check mark)
✓
✓✓\2713Галочка (check mark)
✘
✘\2718Крестик (heavy ballot)
✗
✗✗\2717Крестик (ballot)
╳
╳-
\2573Квадратный крестик
✎
✎\270EКарандаш
✍
✍\270DПишущая рука
♀
♀\2640Женщина
♂
♂\2642Мужчина
☎
☎\260EЧерный телефон
☏
☏\260FБелый телефон
✉
✉\2709Конверт
✆
✆\2706Знак телефона
Иконка
Decimal
Named Entity
css
Название
←
←←\2190Стрелка влево
→
→→\2192Стрелка вправо
↑
↑↑\2191Стрелка вверх
↓
↓↓\2193Стрелка вниз
↔
↔↔\2194Стрелка влево вправо
↕
↕-
\2195Стрелка вверх вниз
⇄
⇄-
\21C4Стрелки вправо и влево
⇅
⇅-
\21C5Стрелки вверх и вниз
↲
↲-
\21B2Вниз-влево 90 градусов
↳
↳-
\21B3Стрелка вниз-вправо 90 градусов
↱
↱-
\21B1Стрелка вверх-вправо 90 градусов
⇤
⇤-
\21E4Стрелка влево к полосе
↶
↶-
\21B6Полукруг против часовой стрелки
↷
↷-
\21B7Полукруг по часовой стрелке
↺
↺-
\21BAКруг против часовой стрелки
↻
↻-
\21BBКруг по часовой стрелке
➔
➔-
\2794Широкоугольная стрелка вправо
↯
↯-
\21AFЗигзагообразная стрелка вниз
↖
↖-
\2196Стрелка Северо-Запада
➘
➘-
\2798Тяжелая юго-восточная стрела
➙
➙-
\2799Тяжелая стрелка вправо
➚
➚-
\279AТяжелая северо-восточная стрела
➟
➟-
\279FПунктирная стрелка вправо
⇠
⇠-
\21E0Пунктирная стрелка влево
⇢
⇢-
\21E2Пунктирная стрелка вправо
➤
➤-
\27A4Черная стрелка вправо
▶
▶-
\25B6Стрелка вправо (max)
◀
◀-
\25C0Стрелка влево (max)
▲
▲-
\25B2Стрелка вверх (max)
▼
▼-
\25BCСтрелка вниз (max)
▸
▸-
\25B8Стрелка вправо (min)
◂
◂-
\25C2Стрелка влево (min)
▴
▴-
\25B4Стрелка вверх (min)
▾
▾-
\25BEСтрелка вниз (min)
►
►-
\25BAСтрелка вправо (удлиненная)
◄
◄-
\25C4Стрелка влево (удлиненная)
▷
▷-
\25B7Белый указатель вправо
◁
◁-
\25C1Белый указатель влево
△
△-
\25B3Белый указатель вверх
▽
▽-
\25BDБелый указатель вниз
⇦
⇦-
\21E6Белая стрелка влево
⇨
⇨-
\21E8Белая стрелка вправо
⇒
⇒⇒\21D2Двойная стрелка вправо
⇐
⇐⇐\21D0Двойная стрелка влево
⇑
⇑⇑\21D1Двойная стрелка вверх
⇓
⇓⇓\21D3Двойная стрелка вниз
⇔
⇔⇔\21D4Двойная стрелка влево-вправо
↵
↵↵\21B5Возврат каретки
Иконка
Decimal
Entity
css
Название
₽
₽-
\0020BDРубль (правый Alt+8)
€
€€\0020ACЕвро
£
££\00A3Фунт
₤
₤-
\20A4Лира
¥
¥¥\00A5Иена
¢
¢¢\00A2Цент
¤
¤¤\00A4Валюта
Иконка
Decimal
Entity
css
Название
°
°°\00B0Градус
☀
☀-
\2600Солнце маленькое
☼
☼-
\263CСолнце большое
☁
☁-
\2601Облако
❆
❆-
\2746Снежинка 1
❅
❅-
\2745Снежинка 2
❄
❄-
\2744Снежинка 3
Иконка
Decimal
Entity
css
Название
☚
☚-
\261AУказатель Влево черный
☛
☛-
\261BУказатель Вправо черный
☜
☜-
\261CУказатель Левый белый
☝
☝-
\261DУказатель Вверх белый
☞
☞-
\261EУказатель Вправо белый
☟
☟-
\261FУказатель Вниз белый
Иконка
Decimal
Entity
css
Название
½
½½\00BDПоловина (1/2)
¼
¼¼\00BCЧетверть (1/4)
¾
¾¾\00BEТри четверти (3/4)
⅓
⅓-
\2153Одна треть (1/3)
⅔
⅔-
\2154Две трети (2/3)
⅛
⅛-
\215BОдна восьмая (1/8)
⅜
⅜-
\215CТри восьмых (3/8)
⅝
⅝-
\215DПять восьмых (5/8)
⅞
⅞-
\215EСемь восьмых (7/8)
Иконка
Decimal
Entity
css
Название
Ⅰ
Ⅰ-
\2160Один (римская цифра)
Ⅱ
Ⅱ-
\2161Два (римская цифра)
Ⅲ
Ⅲ-
\2162Три (римская цифра)
Ⅳ
Ⅳ-
\2163Четыре (римская цифра)
Ⅴ
Ⅴ-
\2164Пять (римская цифра)
Ⅵ
Ⅵ-
\2165Шесть (римская цифра)
Ⅶ
Ⅶ-
\2166Семь (римская цифра)
Ⅷ
Ⅷ-
\2167Восемь (римская цифра)
Ⅸ
Ⅸ-
\2168Девять (римская цифра)
Ⅹ
Ⅹ-
\2169Десять (римская цифра)
Ⅺ
Ⅺ-
\216AОдиннадцать (римская цифра)
Ⅻ
Ⅻ-
\216BДвенадцать (римская цифра)
Иконка
Decimal
Entity
css
Название
∞
∞∞\221EБесконечность
±
±±\00B1Плюс-минус
≅
≅≅\2245Приблизительно равно
≈
≈≈\2248Асимптотически равно
≠
≠≠\2260Не равно
≡
≡≡\2261Тождественно равно
≤
≤≤\2264Меньше или равно
≥
≥≥\2265Больше или равно
÷
÷÷\00F7Деление
×
××\00D7Умножение х
✖
✖-
\2716Тяжелое умножение x
¹
¹¹\00B9Один (верхний индекс)
²
²²\00B2Два (верхний индекс)
³
³³\00B3Три (верхний индекс)
⊕
⊕⊕\2295Прямая сумма
⊗
⊗⊗\2297Векторное произведение
∏
∏∏\220FN-арное произведение
∑
∑∑\2211N-арная сумма (Сигма)
∅
∅∅\2205Пустое множество. Диаметр.
∠
∠∠\2220Угол
∥
∥-
\2225Параллельно
⊥
⊥⊥\22A5Перпендикулярно
△
△-
\25B3Треугольник
○
○-
\25CBКруг
□
□-
\25A1Квадрат
‾
‾‾\203EНадчеркивание
⁄
⁄⁄\2044Дробная черта
Иконка
Decimal
Entity
css
Название
√
√√\221AРадикал
∝
∝∝\221DПропорционально
∩
∩∩\2229Пересечение
∪
∪∪\222AОбъединение
∫
∫∫\222BИнтеграл
∴
∴∴\2234Следовательно
∼
∼∼\223CОператор тильда
⊂
⊂⊂\2282Подмножество
⊃
⊃⊃\2283Надмножество
⊄
⊄⊄\2284Не подмножество
⊆
⊆⊆\2286Подмножество или равно
⊇
⊇⊇\2287Надмножество или равно
∧
∧∧\2227Логичское И
∨
∨∨\2228Логичское ИЛИ
Иконка
Decimal
Entity
css
Название
ℑ
ℑℑ\2111Мнимая часть числа
ℜ
ℜℜ\211CДействительная часть числа
ℵ
ℵℵ\2135Алеф
Иконка
Decimal
Entity
css
Название
∀
∀∀\2200Квантор всеобщности
∃
∃∃\2203Квантор существования
∂
∂∂\2202Дифференциал
∇
∇∇\2207Набла
∈
∈∈\2208Принадлежит множеству
∉
∉∉\2209Не принадлежит множеству
∋
∋∋\220BЯвляется членом
Иконка
Decimal
Entity
css
Название
Δ
ΔΔ\0394Дельта (прописная)
ƒ
ƒƒ\0192Курсивное f
Α
ΑΑ\0391Альфа (прописная)
Β
ΒΒ\0392Бета (прописная)
Γ
ΓΓ\0393Гамма (прописная)
Ε
ΕΕ\0395Эпсилон (прописной)
Ζ
ΖΖ\0396Дзета (прописная)
Η
ΗΗ\0397Эта (прописная)
Θ
ΘΘ\0398Тета (прописная)
Ι
ΙΙ\0399Иота (прописная)
Κ
ΚΚ\039AКаппа (прописная)
Λ
ΛΛ\039BЛамбда (прописная)
Μ
ΜΜ\039CМю (прописная)
Ν
ΝΝ\039DНю (прописная)
Ξ
ΞΞ\039EКси (прописная)
Ο
ΟΟ\039FОмикрон (прописной)
Π
ΠΠ\03A0Пи (прописная)
Ρ
ΡΡ\03A1Ро (прописная)
Σ
ΣΣ\03A3Сигма (прописная)
Τ
ΤΤ\03A4Тау (прописная)
Υ
ΥΥ\03A5Ипсилон (прописная)
Φ
ΦΦ\03A6Фи (прописная)
Χ
ΧΧ\03A7Хи (прописная)
Ψ
ΨΨ\03A8Пси (прописная)
Ω
ΩΩ\03A9Омега (прописная)
α
αα\03B1Альфа (строчная)
β
ββ\03B2Бета (строчная)
γ
γγ\03B3Гамма (строчная)
δ
δδ\03B4Дельта (строчная)
ε
εε\03B5Эпсилон (строчная)
ζ
ζζ\03B6Дзета (строчная)
η
ηη\03B7Эта (строчная)
θ
θθ\03B8Тета (строчная)
ι
ιι\03B9Иота (строчная)
κ
κκ\03BAКаппа (строчная)
λ
λλ\03BBЛамбда (строчная)
μ
μμ\03BCМю (строчная)
ν
νν\03BDНю (строчная)
ξ
ξξ\03BEКси (строчная)
ο
οο\03BFОмикрон (строчный)
π
ππ\03C0Пи (строчная)
ρ
ρρ\03C1Ро (строчная)
ς
ςς\03C2Сигма конечная (строчная)
σ
σσ\03C3Сигма (строчная)
τ
ττ\03C4Тау (строчная)
υ
υυ\03C5Ипсилон (строчная)
φ
φφ\03C6Фи (строчная)
χ
χχ\03C7Хи (строчная)
ψ
ψψ\03C8Пси (строчная)
ω
ωω\03C9Омега (строчная)
ϑ
ϑϑ\03D1Тета (строчная)
ϒ
ϒϒ\03D2Ипсилон с крючком
ϖ
ϖϖ\03D6Пи
Иконка
Decimal
Entity
css
Название
♠
♠♠\2660Пики черные
♥
♥♥\2665Сердце черные
♦
♦♦\2666Буби черные
♣
♣♣\2663Крести черные
♤
♤-
\2664Пики белые
♡
♡-
\2661Сердце белые
♢
♢-
\2662Буби белые
♧
♧-
\2667Крести белые
Иконка
Decimal
Entity
css
Название
♔
♔-
\2654Король белый
♕
♕-
\2655Ферзь белый
♖
♖-
\2656Ладья белая
♗
♗-
\2657Слон белый
♘
♘-
\2658Конь белый
♙
♙-
\2659Пешка белая
♚
♚-
\265AКороль черный
♛
♛-
\265BФерзь черный
♜
♜-
\265CЛадья черная
♝
♝-
\265DСлон черный
♞
♞-
\265EКонь черный
♟
♟-
\265FПешка черная
Всегда показвать иконки как текст
Как показать иконки как текст, а не как Emoji?
Для этого нужно дописать к иконке Вариативный селектор 15 (VARIATION SELECTOR-15 - VS15) - U+FE0E
Например:
🔒
🔒︎ = 🔒︎
☝
☝︎ = ☝︎
Однако он работает не со всеми иконками:
✍
✍️︎ = ✍︎
Подробнее:
Видео по теме