В этой заметке речь пойдет об универсальных 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
Название
☺
☺
\263A
Улыбка
♨
♨
\2668
Хот-спрингс
➑
➑
\2791
8-мяч
☆
☆
\2606
Белая звезда
★
★
\2605
Черная звезда
✪
✪
\272A
Белая звезда обведенная
✰
✰
\2730
Белая звезда
✧
✧
\2727
Белая четырехконечная звезда
✦
✦
\2726
Черная четырехконечная звезда
♡
♡
\2661
Белое сердце
❤
❤
\2764
Черное сердце
✈
✈
\2708
Самолет
✂
✂
\2702
Черные ножницы
✄
✄
\2704
Белые ножницы
♕
♕
\2655
Корона
✝
✝
\271D
Крест
†
†
†
\2020
Кинжал
‡
‡
‡
\2021
Двойной Кинжал
◑
◑
\25D1
Черно-белый круг
♪
♪
\266A
Нота
♫
♫
\266B
Ноты
✣
✣
\2723
Четыре звездочки с шарами
☑
☑
\2611
Чекбокс с галочкой
✔
✔
\2714
Галочка
✘
✘
\2718
Крестик
╳
╳
-
\2573
Квадратный крестик
✎
✎
\270E
Карандаш
✍
✍
\270D
Пишущая рука
♀
♀
\2640
Женщина
♂
♂
\2642
Мужчина
☎
☎
\260E
Черный телефон
☏
☏
\260F
Белый телефон
✉
✉
\2709
Конверт
✆
✆
\2706
Знак телефона
Стрелки
Иконка
Decimal
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
Пунктирная стрелка влево
➤
➤
-
\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
Название
«
«
«
\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
Название
₽
₽
-
\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
Векторное произведение
∏
∏
∏
\220F
N-арное произведение
∑
∑
∑
\2211
N-арная сумма (Сигма)
∅
∅
∅
\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
Пешка черная
Дерево папок
Иконка
Decimal
Entity
css
Название
├
├
-
\251C
└
└
-
\2514
│
│
-
\2502
┬
┬
-
\252C
─
─
-
\2500
Всегда показвать иконки как текст
Как заставить браузеры показыать иконки как текст, а не как Emoji.
Для этого нужно дописать к иконке Вариативный селектор 15 (VARIATION SELECTOR-15 - VS15) - U+FE0E
. Тогда обе эти иконки будут рендерится как один глиф.
Например:
🔒
🔒︎ = 🔒︎
☝
☝︎ = ☝︎
Однако он работает не со всеми иконками:
✍
✍️︎ = ✍︎
Подробнее:
Видео по теме