В этой заметке речь пойдет об универсальных 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
Например:
🔒
🔒︎ = 🔒︎
☝
☝︎ = ☝︎
Однако он работает не со всеми иконками:
✍
✍️︎ = ✍︎
Подробнее:
Видео по теме
