Иногда необходимо добавить иконку в ваш дизайн, но вам не хочется вставлять дополнительные изображения или целый шрифт иконок, такой как Font Awesome? Тогда у нас есть для вас хорошие новости — есть обширная библиотека доступных иконок и символов уже в вашем браузере. Она называется Unicode, и это стандарт, который присваивает уникальные идентификаторы для постоянно растущего числа (в настоящее время более 110 000) символов и иконок.
Это не означает, что у вас есть выбор сотен тысяч икон, хотя. Это зависит от браузера, который рендерит их, и он использует шрифты, которые установлены в системе, чтобы сделать это. В этой статье мы собрали ряд наборов символов, которые доступны в Windows, Linux, OS X, Android и IOS. Вы можете использовать их в своем дизайне сегодня!
Совет: Существует хорошая статья, которая объясняет все, что нужно знать о кодировках и Unicode, которую мы рекомендуем для прочтения каждому разработчику ПО.
Как использовать эти иконки
Иконки, приведенные в таблицах ниже, являются обычными символами, которые Вы можете скопировать и вставить как если бы они являлись буквами алфавита. Но если кодировка, используемая для сохранения файлов HTML/CSS не UTF-8 они не будут отображаться. Именно поэтому мы ввели HTML escape-код, который будет работать всегда. Вот то, что вам нужно сделать, чтобы использовать эти иконки:
- Найдите иконку, которая вам нравится. Мы предоставили малые и большие превью.
- Скопируйте код.
- Вставьте её в HTML, как обычный текст. В CSS вы можете использовать их как значение свойства content. В JS, PHP и других языках программирования, вы можете использовать их как обычный текст в строках.
- Вы можете настроить иконки, установив размер шрифта, цвет, текст и тени, также как обычный текст.
Иконки
| Название |
Превью |
Код |
| Smiley |
☺ |
☺ |
☺ |
| Warning Sign |
⚠ |
⚠ |
⚠ |
| Hot Springs |
♨ |
♨ |
♨ |
| Wheelchair |
♿ |
♿ |
♿ |
| Recycle |
♻ |
♻ |
♻ |
| 8-Ball |
➑ |
➑ |
➑ |
| High Voltage |
⚡ |
⚡ |
⚡ |
| White Star |
☆ |
☆ |
☆ |
| Black Star |
★ |
★ |
★ |
| White Heart |
♡ |
♡ |
♡ |
| Black Heart |
❤ |
❤ |
❤ |
| Coffee |
☕ |
☕ |
☕ |
| Airplane |
✈ |
✈ |
✈ |
| Hourglass |
⌛ |
⌛ |
⌛ |
| Clock |
⌚ |
⌚ |
⌚ |
| Black Scissors |
✂ |
✂ |
✂ |
| White Scissors |
✄ |
✄ |
✄ |
| Crown |
♕ |
♕ |
♕ |
| Anchor |
⚓ |
⚓ |
⚓ |
| Cross |
✝ |
✝ |
✝ |
| Black-White Circle |
◑ |
◑ |
◑ |
| Eight Note |
♪ |
♪ |
♪ |
| Beamed Eighth Notes |
♫ |
♫ |
♫ |
| Four Balloon-Spoked Asterisk |
✣ |
✣ |
✣ |
| Circled White Star |
✪ |
✪ |
✪ |
| White Star |
✰ |
✰ |
✰ |
| White Four Pointed Star |
✧ |
✧ |
✧ |
| Black Four Pointed Star |
✦ |
✦ |
✦ |
| Ballot Box Check |
☑ |
☑ |
☑ |
| Check Mark |
✔ |
✔ |
✔ |
| Cross Mark |
✘ |
✘ |
✘ |
| Pencil |
✎ |
✎ |
✎ |
| Writing Hand |
✍ |
✍ |
✍ |
| Female |
♀ |
♀ |
♀ |
| Male |
♂ |
♂ |
♂ |
| Black Telephone |
☎ |
☎ |
☎ |
| White Telephone |
☏ |
☏ |
☏ |
| Envelope |
✉ |
✉ |
✉ |
| Telephone Location |
✆ |
✆ |
✆ |
Стрелки в юникоде
| Название |
Превью |
Код |
| Leftwards Arrow |
← |
← |
← |
| Rightwards Arrow |
→ |
→ |
→ |
| Upwards Arrow |
↑ |
↑ |
↑ |
| Downwards Arrow |
↓ |
↓ |
↓ |
| Left Right Arrow |
↔ |
↔ |
↔ |
| Up Down Arrow |
↕ |
↕ |
↕ |
| Right And Left Arrows |
⇄ |
⇄ |
⇄ |
| Up And Down Arrows |
⇅ |
⇅ |
⇅ |
| Down-Left 90deg Arrow |
↲ |
↲ |
↲ |
| Down-Right 90deg Arrow |
↳ |
↳ |
↳ |
| Up-Left 90deg Arrow |
↰ |
↰ |
↰ |
| Up-Right 90deg Arrow |
↱ |
↱ |
↱ |
| North West Arrow To Corner |
⇱ |
⇱ |
⇱ |
| South East Arrow To Corner |
⇲ |
⇲ |
⇲ |
| Leftwards Arrow To Bar |
⇤ |
⇤ |
⇤ |
| Rightwards Arrow To Bar |
⇥ |
⇥ |
⇥ |
| Anticlockwise Semicircle Arrow |
↶ |
↶ |
↶ |
| Clockwise Semicircle Arrow |
↷ |
↷ |
↷ |
| Anticlockwise Circle Arrow |
↺ |
↺ |
↺ |
| Clockwise Circle Arrow |
↻ |
↻ |
↻ |
| Wide-Headed Rightwards Arrow |
➔ |
➔ |
➔ |
| Downwards Zigzag Arrow |
↯ |
↯ |
↯ |
| North West Arrow |
↖ |
↖ |
↖ |
| Heavy South East Arrow |
➘ |
➘ |
➘ |
| Heavy Rightwards Arrow |
➙ |
➙ |
➙ |
| Heavy North East Arrow |
➚ |
➚ |
➚ |
| Dashed Rightwards Arrow |
➟ |
➟ |
➟ |
| Dotted Leftwards Arrow |
⇠ |
⇠ |
⇠ |
| Black Rightwards Arrowhead |
➤ |
➤ |
➤ |
| Leftwards White Arrow |
⇦ |
⇦ |
⇦ |
| Rightwards White Arrow |
⇨ |
⇨ |
⇨ |
| Left Angle Quotation Mark |
« |
« |
« |
| Right Angle Quotation Mark |
» |
» |
» |
| Right Black Pointer |
► |
► |
► |
| Left Black Pointer |
◀ |
◀ |
◀ |
| Up Black Pointer |
▲ |
▲ |
▲ |
| Down Black Pointer |
▼ |
▼ |
▼ |
| Right White Pointer |
▷ |
▷ |
▷ |
| Left White Pointer |
◁ |
◁ |
◁ |
| Up White Pointer |
△ |
△ |
△ |
| Down White Pointer |
▽ |
▽ |
▽ |
| Bow Arrow |
➴ |
➴ |
➴ |
Спецсимволы в юникоде
| Name |
Preview |
Code |
| Numero |
№ |
№ |
№ |
| Copyright |
© |
© |
© |
| Registered |
® |
® |
® |
| Trademark |
™ |
™ |
™ |
| Estimated |
℮ |
℮ |
℮ |
| Bullet |
• |
• |
• |
| Middle Dot |
· |
· |
· |
Валюта в юникоде
| Название |
Превью |
Код |
| Евро |
€ |
€ |
€ |
| Рубль |
₽ |
₽ |
₽ |
| Гривна |
₴ |
₴ |
₴ |
| Казахстанский тенге |
₸ |
₸ |
₸ |
| Фунт |
£ |
£ |
£ |
| Лира |
₤ |
₤ |
₤ |
| Йена |
¥ |
¥ |
¥ |
| Цент |
¢ |
¢ |
¢ |
| Валюта |
¤ |
¤ |
¤ |
Иконки погоды
| Название |
Превью |
Код |
| Degree |
° |
° |
° |
| Small Sun |
☀ |
☀ |
☀ |
| Big Sun |
☼ |
☼ |
☼ |
| Cloud |
☁ |
☁ |
☁ |
| Umbrella |
☔ |
☔ |
☔ |
| Snowflake 1 |
❆ |
❆ |
❆ |
| Snowflake 2 |
❅ |
❅ |
❅ |
| Snowflake 3 |
❄ |
❄ |
❄ |
Указатели в юникоде
| Название |
Превью |
Код |
| Pointer Left Black |
☚ |
☚ |
☚ |
| Pointer Right Black |
☛ |
☛ |
☛ |
| Pointer Left White |
☜ |
☜ |
☜ |
| Pointer Up White |
☝ |
☝ |
☝ |
| Pointer Right White |
☞ |
☞ |
☞ |
| Pointer Down White |
☟ |
☟ |
☟ |
Знаки зодиака в юникоде
| Название |
Превью |
Код |
| Овен |
♈ |
♈ |
♈ |
| Телец |
♉ |
♉ |
♉ |
| Близнецы |
♊ |
♊ |
♊ |
| Рак |
♋ |
♋ |
♋ |
| Лев |
♌ |
♌ |
♌ |
| Дева |
♍ |
♍ |
♍ |
| Весы |
♎ |
♎ |
♎ |
| Скорпион |
♏ |
♏ |
♏ |
| Стрелец |
♐ |
♐ |
♐ |
| Козерог |
♑ |
♑ |
♑ |
| Водолей |
♒ |
♒ |
♒ |
| Рыбы |
♓ |
♓ |
♓ |
Карточные символы в юникоде
| Название |
Превью |
Код |
| Clubs Black |
♠ |
♠ |
♠ |
| Hearts Black |
♥ |
♥ |
♥ |
| Diamonds Black |
♦ |
♦ |
♦ |
| Spades Black |
♣ |
♣ |
♣ |
| Clubs White |
♤ |
♤ |
♤ |
| Hearts White |
♡ |
♡ |
♡ |
| Diamonds White |
♢ |
♢ |
♢ |
| Spades White |
♧ |
♧ |
♧ |
Шахматные фигуры в юникоде
| Название |
Превью |
Код |
| King White |
♔ |
♔ |
♔ |
| Queen White |
♕ |
♕ |
♕ |
| Rook White |
♖ |
♖ |
♖ |
| Bishop White |
♗ |
♗ |
♗ |
| Knight White |
♘ |
♘ |
♘ |
| Pawn White |
♙ |
♙ |
♙ |
| King Black |
♚ |
♚ |
♚ |
| Queen Black |
♛ |
♛ |
♛ |
| Rook Black |
♜ |
♜ |
♜ |
| Bishop Black |
♝ |
♝ |
♝ |
| Knight Black |
♞ |
♞ |
♞ |
| Pawn Black |
♟ |
♟ |
♟ |
Игра в кости
| Название |
Превью |
Код |
| Dice Roll One |
⚀ |
⚀ |
⚀ |
| Dice Roll Two |
⚁ |
⚁ |
⚁ |
| Dice Roll Three |
⚂ |
⚂ |
⚂ |
| Dice Roll Four |
⚃ |
⚃ |
⚃ |
| Dice Roll Five |
⚄ |
⚄ |
⚄ |
| Dice Roll Six |
⚅ |
⚅ |
⚅ |
Математические символы в юникоде
| Название |
Превью |
Код |
| Infinity |
∞ |
∞ |
∞ |
| Plus Minus |
± |
± |
± |
| Less-Than Or Equal To |
≤ |
≤ |
≤ |
| More-Than Or Equal To |
≥ |
≥ |
≥ |
| Not Equal To |
≠ |
≠ |
≠ |
| Division |
÷ |
÷ |
÷ |
| Multiplication x |
× |
× |
× |
| Heavy Multiplication x |
✖ |
✖ |
✖ |
| Superscript One |
¹ |
¹ |
¹ |
| Superscript Two |
² |
² |
² |
| Superscript Three |
³ |
³ |
³ |
| Circled Plus |
⊕ |
⊕ |
⊕ |
| Circled Multiplication |
⊗ |
⊗ |
⊗ |
| Logical AND |
∧ |
∧ |
∧ |
| Logical OR |
∨ |
∨ |
∨ |
| Delta |
∆ |
∆ |
∆ |
| Pie |
∏ |
∏ |
∏ |
| Sigma (SUM) |
∑ |
∑ |
∑ |
| Omega |
Ω |
Ω |
Ω |
| Empty Set |
∅ |
∅ |
∅ |
| Angle |
∠ |
∠ |
∠ |
| Parallel |
∥ |
∥ |
∥ |
| Perpendicular |
⊥ |
⊥ |
⊥ |
| Almost Equal To |
≈ |
≈ |
≈ |
| Triangle |
△ |
△ |
△ |
| Circle |
○ |
○ |
○ |
| Square |
□ |
□ |
□ |
Дроби
| Название |
Превью |
Код |
| One Quarter (1/4) |
¼ |
¼ |
¼ |
| One Half (1/2) |
½ |
½ |
½ |
| Three Quarters (3/4) |
¾ |
¾ |
¾ |
| One Third (1/3) |
⅓ |
⅓ |
⅓ |
| Two Thirds (2/3) |
⅔ |
⅔ |
⅔ |
| One Eight (1/8) |
⅛ |
⅛ |
⅛ |
| Three Eights (3/8) |
⅜ |
⅜ |
⅜ |
| Five Eights (5/8) |
⅝ |
⅝ |
⅝ |
| Seven Eights (7/8) |
⅞ |
⅞ |
⅞ |
Римские цифры в юникоде
| Название |
Превью |
Код |
| Roman Numeral One |
Ⅰ |
Ⅰ |
Ⅰ |
| Roman Numeral Two |
Ⅱ |
Ⅱ |
Ⅱ |
| Roman Numeral Three |
Ⅲ |
Ⅲ |
Ⅲ |
| Roman Numeral Four |
Ⅳ |
Ⅳ |
Ⅳ |
| Roman Numeral Five |
Ⅴ |
Ⅴ |
Ⅴ |
| Roman Numeral Six |
Ⅵ |
Ⅵ |
Ⅵ |
| Roman Numeral Seven |
Ⅶ |
Ⅶ |
Ⅶ |
| Roman Numeral Eight |
Ⅷ |
Ⅷ |
Ⅷ |
| Roman Numeral Nine |
Ⅸ |
Ⅸ |
Ⅸ |
| Roman Numeral Ten |
Ⅹ |
Ⅹ |
Ⅹ |
| Roman Numeral Eleven |
Ⅺ |
Ⅺ |
Ⅺ |
| Roman Numeral Twelve |
Ⅻ |
Ⅻ |
Ⅻ |
Есть некоторые различия рендеринга этих символов в различных операционных системах. Это вызвано различными семействами шрифтов, которые используются. Кроме того, iOS и Android заменяют некоторые символы Unicode на смайлики, так что не забудьте проверить добавленные символы, чтобы убедиться, что этого не произойдет и иконки показываются, как предполагалось.
Источник
