HTML-символы

Коллекция HTML-символов для вставки на сайт, не требует дополнительной установки шрифтов.

Подборка часто используемых HTML-символов (символов-мнемоник), которые можно использовать при верстке сайта, заменив ими иконки. Преимущество заключается в том, что их вывод не требует подключения дополнительного шрифта на сайт. Так же они почти ничего не весят (вес == длине HTML-кода) и не создают дополнительных HTTP-запросов к серверу, что способствует уменьшению времени загрузки страницы.

Часто используемые символы
Cимвол Мнемоника CSS-код Описание
      content: "\a0"; Неразрывный пробел
    content: "\2009"; Очень узкий пробел
    content: "\2002"; Пробел шириной в букву N
    content: "\2003"; Пробел шириной в букву M
‌ ‌ content: "\200c"; Несоединяющий символ нулевой длины
‍ ‍ content: "\200d"; Соединяющий символ нулевой длины
– – content: "\2013"; Узкое тире
— — content: "\2014"; Широкое тире
́   ́ content: "\301"; Ударение, ставится после "ударной" буквы
… … content: "\2026"; Многоточие
§ § § content: "\a7"; Параграф
° ° ° content: "\b0"; Градус
‰ ‰ content: "\2030"; Промилле
π π π content: "\3c0"; Пи
µ µ µ content: "\b5"; Микро
¶ ¶ content: "\b6"; Знак абзаца
• • content: "\2022"; Маркер списка
‾ ‾ content: "\203e"; Надчеркивание
& & & content: "\26"; Амперсанд
< &lt; &#60; content: "\3c"; Меньше (начало тега)
> &gt; &#62; content: "\3e"; Больше (конец тега)
" &quot; &#34; content: "\22"; Двойная ковычка
« &laquo; &#171; content: "\ab"; Левая типографская кавычка
» &raquo; &#187; content: "\bb"; Правая типографская кавычка
&lsaquo; &#8249; content: "\2039"; Левая одиночная угловая кавычка
&rsaquo; &#8250; content: "\203a"; Правая одиночная угловая кавычка
&prime; &#8242; content: "\2032"; Штрих (минуты, футы)
&Prime; &#8243; content: "\2033"; Двойной штрих (секунды, дюймы)
&lsquo; &#8216; content: "\2018"; Левая верхняя одиночная кавычка
&rsquo; &#8217; content: "\2019"; Правая верхняя одиночная кавычка
&sbquo; &#8218; content: "\2020"; Правая нижняя одиночная кавычка
&ldquo; &#8220; content: "\201c"; Кавычка-лапка левая верхняя
&rdquo; &#8221; content: "\201d"; Кавычка-лапка правая верхняя
&bdquo; &#8222; content: "\201e"; Кавычка-лапка правая нижняя
  &#8223; content: "\201f"; Какая то кавычка
 
Копирайты
Cимвол Мнемоника CSS-код Описание
© &copy; &#169; content: "\a9"; Копирайт
® &reg; &#174; content: "\ae"; Знак зарегистрированной торговой марки
&trade; &#8482; content: "\2122"; Знак торговой марки
 
Знаки валют
Cимвол Мнемоника CSS-код Описание
&euro; &#8364; content: "\20ac"; Евро
¢ &cent; &#162; content: "\a2"; Цент
£ &pound; &#163; content: "\a3"; Фунт стерлингов
¥ &yen; &#165; content: "\a5"; Йена или юань
ƒ &fnof; &#402; content: "\192"; Флорин
  &#8381; content: "\20bd"; Российский рубль
  &#8372; content: "\20b4"; Украинская гривна
  &#8377; content: "\20b9"; Индийская рупия
  &#22291; content: "\5713"; Китайский юань
  &#8376; content: "\20b8"; Казахстанский тенге
 
Стрелки
Cимвол Мнемоника CSS-код Описание
&larr; &#8592; content: "\2190"; Стрелка влево
&uarr; &#8593; content: "\2191"; Стрелка вверх
&rarr; &#8594; content: "\2192"; Стрелка вправо
&darr; &#8595; content: "\2193"; Стрелка вниз
&harr; &#8596; content: "\2194"; Стрелка влево и вправо
  &#8597; content: "\2195"; Стрелка вверх и вниз
  &#8598; content: "\2196"; Стрелка по диагонали вверх-влево
  &#8599; content: "\2197"; Стрелка по диагонали вверх-вправо
  &#8600; content: "\2198"; Стрелка по диагонали вниз-вправо
  &#8601; content: "\2199"; Стрелка по диагонали вниз-влево
&lArr; &#8656; content: "\21d0"; Двойная стрелка влево
&uArr; &#8657; content: "\21d1"; Двойная стрелка вверх
&rArr; &#8658; content: "\21d2"; Двойная стрелка вправо
&dArr; &#8659; content: "\21d3"; Двойная стрелка вниз
&hArr; &#8660; content: "\21d4"; Двойная стрелка влево и вправо
  &#8661; content: "\21d5"; Двойная стрелка вверх и вниз
  &#8662; content: "\21d6"; Двойная стрелка по диагонали вверх-влево
  &#8663; content: "\21d7"; Двойная стрелка по диагонали вверх-вправо
  &#8664; content: "\21d8"; Двойная стрелка по диагонали вниз-вправо
  &#8665; content: "\21d9"; Двойная стрелка по диагонали вниз-влево
  &#8672; content: "\21e0"; Пунктирная стрелка влево
  &#8673; content: "\21e1"; Пунктирная стрелка вверх
  &#8674; content: "\21e2"; Пунктирная стрелка вправо
  &#8675; content: "\21e3"; Пунктирная стрелка вниз
  &#9650; content: "\25b2"; Треугольная стрелка вверх
  &#9651; content: "\25b3"; Треугольная стрелка вверх (Контур)
  &#9654; content: "\25b6"; Треугольная стрелка вправо
  &#9655; content: "\25b7"; Треугольная стрелка вправо (Контур)
  &#9660; content: "\25bc"; Треугольная стрелка вниз
  &#9661; content: "\25bd"; Треугольная стрелка вниз (Контур)
  &#9664; content: "\25c0"; Треугольная стрелка влево
  &#9665; content: "\25c1"; Треугольная стрелка влево (Контур)
Еще стрелки
  &#8676; content: "\21e4";
  &#8677; content: "\21e5";
  &#8644; content: "\21c4";
  &#8645; content: "\21c5";
  &#8646; content: "\21c6";
  &#8647; content: "\21c7";
  &#8648; content: "\21c8";
  &#8649; content: "\21c9";
  &#8650; content: "\21ca";
  &#8678; content: "\21e6";
  &#8679; content: "\21e7";
  &#8680; content: "\21e8";
  &#8681; content: "\21e9";
  &#8634; content: "\21ba";
  &#8635; content: "\21bb";
  &#10226; content: "\27f2";
  &#10227; content: "\27f3";
  &#11013; content: "\2b05";
  &#11014; content: "\2b06";
  &#11157; content: "\2b95";
  &#11015; content: "\2b07";
  &#11016; content: "\2b08";
  &#11017; content: "\2b09";
  &#11018; content: "\2b0a";
  &#11019; content: "\2b0b";
 
Математические знаки
Cимвол Мнемоника CSS-код Описание
× &times; &#215; content: "\d7"; Умножение
÷ &divide; &#247; content: "\f7"; Деление
± &plusmn; &#177; content: "\b1"; Плюс / минус
¬ &not; &#172; content: "\ac"; Отрицание
&le; &#8804; content: "\2264"; Меньше или равно
&ge; &#8805; content: "\2265"; Больше или равно
&asymp; &#8776; content: "\2248"; Приблизительно
&ne; &#8800; content: "\2260"; Не равно
&equiv; &#8801; content: "\2261"; Тождественно
&radic; &#8730; content: "\221a"; Квадратный корень
  &#8731; content: "\221b"; Корень третьей степени
  &#8732; content: "\221c"; Корень четвертой степени
&infin; &#8734; content: "\221e"; Бесконечность
&sum; &#8721; content: "\2211"; Знак суммирования
&prod; &#8719; content: "\220f"; Знак произведения
&part; &#8706; content: "\2202"; Частный дифференциал
&int; &#8747; content: "\222b"; Интеграл
&forall; &#8704; content: "\2200"; Для всех
&exist; &#8707; content: "\2203"; Существует
&nexist; &#8708; content: "\2204"; Не существует
&empty; &#8709; content: "\2205"; Пустое множество
Δ &Delta; &#8710; content: "\2206"; Дельта
&isin; &#8712; content: "\2208"; Принадлежит
&notin; &#8713; content: "\2209"; Не принадлежит
&ni; &#8715; content: "\220b"; Содержит
  &#8716; content: "\220c"; Не содержит
&sub; &#8834; content: "\2282"; Является подмножеством
&nsub; &#8836; content: "\2284"; Не является подмножеством
&sup; &#8835; content: "\2283"; Является надмножеством
&nsup; &#8837; content: "\2285"; Не является надмножеством
&sube; &#8838; content: "\2286"; Является подмножеством либо равно
&nsube; &#8840; content: "\2288"; Не является подмножеством и не равно
&supe; &#8839; content: "\2287"; Является надмножеством либо равно
&nsupe; &#8841; content: "\2289"; Не является надмножеством и не равно
&and; &#8743; content: "\2227"; Логическое И
&or; &#8744; content: "\2228"; Логическое ИЛИ
&cap; &#8745; content: "\2229"; Пересечение
&cup; &#8746; content: "\222a"; Объединение
&perp; &#8869; content: "\22a5"; Перпендикулярно
&ang; &#8736; content: "\2220"; Угол
 
Греческий алфавит
Cимвол Мнемоника CSS-код Описание
α &alpha; &#945; content: "\3b1"; Альфа (строчная)
β &beta; &#946; content: "\3b2"; Бета (строчная)
γ &gamma; &#947; content: "\3b3"; Гамма (строчная)
δ &delta; &#948; content: "\3b4"; Дельта (строчная)
ε &epsilon; &#949; content: "\3b5"; Эпсилон (строчная)
ζ &zeta; &#950; content: "\3b6"; Дзета (строчная)
η &eta; &#951; content: "\3b7"; Эта (строчная)
θ &theta; &#952; content: "\3b8"; Тета (строчная)
ι &iota; &#953; content: "\3b9"; Йота (строчная)
κ &kappa; &#954; content: "\3ba"; Каппа (строчная)
λ &lambda; &#955; content: "\3bb"; Лямбда (строчная)
μ &mu; &#956; content: "\3bc"; Мю (строчная)
ν &nu; &#957; content: "\3bd"; Ню (строчная)
ξ &xi; &#958; content: "\3be"; Кси (строчная)
ο &omicron; &#959; content: "\3bf"; Омикрон (строчная)
π &pi; &#960; content: "\3c0"; Пи (строчная)
ρ &rho; &#961; content: "\3c1"; Ро (строчная)
σ &sigma; &#962; content: "\3c2"; Сигма (строчная)
ς &sigmaf; &#963; content: "\3c3"; Окончательная сигма (строчная)
τ &tau; &#964; content: "\3c4"; Тау (строчная)
υ &upsilon; &#965; content: "\3c5"; Ипсилон (строчная)
φ &phi; &#966; content: "\3c6"; Фи (строчная)
χ &chi; &#967; content: "\3c7"; Хи (строчная)
ψ &psi; &#968; content: "\3c8"; Пси (строчная)
ω &omega; &#969; content: "\3c9"; Омега (строчная)
Α &Alpha; &#913; content: "\391"; Альфа (прописная)
Β &Beta; &#914; content: "\392"; Бета (прописная)
Γ &Gamma; &#915; content: "\393"; Гамма (прописная)
Δ &Delta; &#916; content: "\394"; Дельта (прописная)
Ε &Epsilon; &#917; content: "\395"; Эпсилон (прописная)
Ζ &Zeta; &#918; content: "\396"; Дзета (прописная)
Η &Eta; &#919; content: "\397"; Эта (прописная)
Θ &Theta; &#920; content: "\398"; Тета (прописная)
Ι &Iota; &#921; content: "\399"; Йота (прописная)
Κ &Kappa; &#922; content: "\39a"; Каппа (прописная)
Λ &Lambda; &#923; content: "\39b"; Лямбда (прописная)
Μ &Mu; &#924; content: "\39c"; Мю (прописная)
Ν &Nu; &#925; content: "\39d"; Ню (прописная)
Ξ &Xi; &#926; content: "\39e"; Кси (прописная)
Ο &Omicron; &#927; content: "\39f"; Омикрон (прописная)
Π &Pi; &#928; content: "\3a0"; Пи (прописная)
Ρ &Rho; &#929; content: "\3a1"; Ро (прописная)
Σ &Sigma; &#931; content: "\3a3"; Сигма (прописная)
Τ &Tau; &#932; content: "\3a4"; Тау (прописная)
Υ &Upsilon; &#933; content: "\3a5"; Ипсилон (прописная)
Φ &Phi; &#934; content: "\3a6"; Фи (прописная)
Χ &Chi; &#935; content: "\3a7"; Хи (прописная)
Ψ &Psi; &#936; content: "\3a8"; Пси (прописная)
Ω &Omega; &#937; content: "\3a9"; Омега (прописная)
 
Знаки занимающие несколько строк
Cимвол Мнемоника CSS-код Описание
  &#8992; content: "\2320"; Верхняя часть интеграла (для 2 строчек)
  &#8993; content: "\2321"; Нижняя часть интеграла (для 2 строчек)
  &#9138; content: "\23b2"; Верхняя часть знака суммирования (для 2 строчек)
  &#9139; content: "\23b3"; Нижняя часть знака суммирования (для 2 строчек)
  &#9115; content: "\239b"; Верхняя часть открывающей круглой скобки (для 3 строчек)
  &#9116; content: "\239c"; Центральная часть открывающей круглой скобки (для 3 строчек)
  &#9117; content: "\239d"; Нижняя часть открывающей круглой скобки (для 3 строчек)
  &#9118; content: "\239e"; Верхняя часть закрывающей круглой скобки (для 3 строчек)
  &#9119; content: "\239f"; Центральная часть закрывающей круглой скобки (для 3 строчек)
  &#9120; content: "\23a0"; Нижняя часть закрывающей круглой скобки (для 3 строчек)
  &#9121; content: "\23a1"; Верхняя часть открывающей квадратной скобки (для 3 строчек)
  &#9122; content: "\23a2"; Центральная часть открывающей квадратной скобки (для 3 строчек)
  &#9123; content: "\23a3"; Нижняя часть открывающей квадратной скобки (для 3 строчек)
  &#9124; content: "\23a4"; Верхняя часть закрывающей квадратной скобки (для 3 строчек)
  &#9125; content: "\23a5"; Центральная часть закрывающей квадратной скобки (для 3 строчек)
  &#9126; content: "\23a6"; Нижняя часть закрывающей квадратной скобки (для 3 строчек)
  &#9127; content: "\23a7"; Верхняя часть открывающей фигурной скобки (для 3 строчек)
  &#9128; content: "\23a8"; Центральная часть открывающей фигурной скобки (для 3 строчек)
  &#9129; content: "\23a9"; Нижняя часть открывающей фигурной скобки (для 3 строчек)
  &#9131; content: "\23ab"; Верхняя часть закрывающей фигурной скобки (для 3 строчек)
  &#9132; content: "\23ac"; Центральная часть закрывающей фигурной скобки (для 3 строчек)
  &#9133; content: "\23ad"; Нижняя часть закрывающей фигурной скобки (для 3 строчек)
 
Знаки зодиака
Cимвол Мнемоника CSS-код Описание
  &#9800; content: "\2648"; Овен
  &#9801; content: "\2649"; Телец
  &#9802; content: "\264a"; Близнецы
  &#9803; content: "\264b"; Рак
  &#9804; content: "\264c"; Лев
  &#9805; content: "\264d"; Дева
  &#9806; content: "\264e"; Весы
  &#9807; content: "\264f"; Скорпион
  &#9808; content: "\2650"; Стрелец
  &#9809; content: "\2651"; Козерог
  &#9810; content: "\2652"; Водолей
  &#9811; content: "\2653"; Рыбы
 
Шахматы
Cимвол Мнемоника CSS-код Описание
  &#9812; content: "\2654"; Белый король
  &#9813; content: "\2655"; Белый ферзь (королева)
  &#9814; content: "\2656"; Белая ладья (тура)
  &#9815; content: "\2657"; Белый слон (офицер)
  &#9816; content: "\2658"; Белый конь
  &#9817; content: "\2659"; Белая пешка
  &#9818; content: "\265a"; Черный король
  &#9819; content: "\265b"; Черный ферзь (королева)
  &#9820; content: "\265c"; Черная ладья (тура)
  &#9821; content: "\265d"; Черный слон (офицер)
  &#9822; content: "\265e"; Черный конь
  &#9823; content: "\265f"; Черная пешка
 
Игральные карты
Cимвол Мнемоника CSS-код Описание
&spades; &#9824; content: "\2660"; Пики (Вини)
&clubs; &#9827; content: "\2663"; Крести (Трефы)
&hearts; &#9829; content: "\2665"; Червы
&diams; &#9830; content: "\2666"; Бубны (Буби)
  &#9828; content: "\2664"; Пики (Вини) (контур)
  &#9831; content: "\2667"; Крести (Трефы) (контур)
  &#9825; content: "\2661"; Червы (контур)
  &#9826; content: "\2662"; Бубны (Буби) (контур)
 
Погода / Время суток
Cимвол Мнемоника CSS-код Описание
  &#9728; content: "\2600"; Солнце
  &#9729; content: "\2601"; Облако
  &#9730; content: "\2602"; Зонтик
  &#9788; content: "\263c"; Солнышко
  &#9789; content: "\263d"; Луна
  &#9790; content: "\263e"; Луна
  &#9925; content: "\26c5"; Солнце за облаком
  &#9928; content: "\26c8"; Туча (Гроза)
 
Прочее
Cимвол Мнемоника CSS-код Описание
  &#9733; content: "\2605"; Звезда
  &#9734; content: "\2606"; Звезда (Контур)
  &#9742; content: "\260e"; Телефон
  &#9743; content: "\260f"; Телефон
  &#9785; content: "\2639"; Смайлик
  &#9786; content: "\263a"; Смайлик
  &#9787; content: "\263b"; Смайлик
  &#9792; content: "\2640"; Знак женского пола
  &#9794; content: "\2642"; Знак мужского пола
  &#9834; content: "\266a"; Нота
  &#9835; content: "\266b"; Нота
  &#9917; content: "\26bd"; Футбольный мяч
  &#9918; content: "\26be"; Тенисный мяч
  &#9986; content: "\2702"; Ножницы
  &#9988; content: "\2704"; Ножницы
  &#9990; content: "\2706"; Телефонная трубка
  &#9992; content: "\2708"; Самолет
  &#9993; content: "\2709"; Конверт
  &#9999; content: "\270f"; Карандаш
  &#10003; content: "\2713"; Галка
  &#10004; content: "\2714"; Жирная галка
  &#10005; content: "\2715"; Крестик
  &#10006; content: "\2716"; Жирный крестик
  &#10007; content: "\2717"; Наклонный крестик
  &#10008; content: "\2718"; Наклонный жирный крестик
  &#9680; content: "\25d0"; Круг с левой закрашенной половиной
  &#9681; content: "\25d1"; Круг с закрашенной правой половиной
  &#9775; content: "\262f"; Инь и ян
  &#8986; content: "\231a"; Наручные часы
  &#9200; content: "\23f0"; Будильник
  &#9201; content: "\23f1"; Часы
  &#9202; content: "\23f2"; Часы
  &#9203; content: "\23f3"; Песочные часы
 
Медиа
Cимвол Мнемоника CSS-код Описание
  &#9199; content: "\23ef"; Воспроизведение / Пауза
  &#9208; content: "\23f8"; Пауза
  &#9209; content: "\23f9"; Стоп
  &#9210; content: "\23fa"; Запись
  &#9193; content: "\23e9"; Перемотка вправо
  &#9194; content: "\23ea"; Перемотка влево
  &#9195; content: "\23eb"; Перемотка вверх
  &#9196; content: "\23ec"; Перемотка вниз
  &#9197; content: "\23ed"; Перемотка в конец
  &#9198; content: "\23ee"; Перемотка в начало