You don’t need icons! Here are 100+ unicode symbols that you can use

You don't need icons! Here are 100+ unicode symbols that you can use

Ever needed to add an icon to your design, but you didn’t want to include images or an entire icon font like Font Awesome into your page? We’ve got good news for you – there is a vast library of available icons and glyphs already in your browser. It is called Unicode, and it is a standard which assigns a unique identifier for an ever expanding number (currently over 110 000) of characters, symbols and icons.

This doesn’t mean that you have a choice of a hundred thousand icons, though. It is up to the browser to render them, and it uses the fonts which are installed on the system to do so. In this article, we’ve collected a number of symbols that are available across Windows, Linux, OS X, Android and iOS. You can use them in your web designs today!

Tip: There is a good article which explains everything you need to know about character encodings and unicode, which we recommend for every software developer to read.

How to use these icons

The icons given in the tables below, are regular characters, which you can copy and paste as if they are letters of text. But if the encoding used to save your HTML/CSS files is not UTF-8 they might not show up. This is why we’ve provided an HTML escape code, which will always work. Here is what you need to do to use these icons:

  1. Find an icon that you like. We’ve provided small and large previews.
  2. Copy the code.
  3. Paste it in your HTML as regular text. In your CSS, you can use it as the value of the content property. In JS, PHP and other programming languages, you can use it as text in strings.
  4. You can customize the icons by setting a font-size, color and text shadows, just like regular text.

Icon-like

Name Preview Code
Smiley ☺
Hot Springs ♨
8-Ball ➑
White Star ☆
Black Star ★
White Heart ♡
Black Heart ❤
Airplane ✈
Black Scissors ✂
White Scissors ✄
Crown ♕
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 ✆

Arrows

Name Preview Code
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 ↱
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 ➴

Special

Name Preview Code
Numero №
Copyright © © ©
Registered ® ® ®
Trademark ™
Estimated ℮
Bullet •
Middle Dot · · ·

Currency

Name Preview Code
Euro €
Pound £ £ £
Lira ₤
Yen ¥ ¥ ¥
Cent ¢ ¢ ¢
Currency ¤ ¤ ¤

Weather

Name Preview Code
Degree ° ° °
Small Sun ☀
Big Sun ☼
Cloud ☁
Snowflake 1 ❆
Snowflake 2 ❅
Snowflake 3 ❄

Pointers

Name Preview Code
Pointer Left Black ☚
Pointer Right Black ☛
Pointer Left White ☜
Pointer Up White ☝
Pointer Right White ☞
Pointer Down White ☟

Card Suits

Name Preview Code
Spades Black ♠
Hearts Black ♥
Diamonds Black ♦
Clubs Black ♣
Spades White ♤
Hearts White ♡
Diamonds White ♢
Clubs White ♧

Chess

Name Preview Code
King White ♔
Queen White ♕
Rook White ♖
Bishop White ♗
Knight White ♘
Pawn White ♙
King Black ♚
Queen Black ♛
Rook Black ♜
Bishop Black ♝
Knight Black ♞
Pawn Black ♟

Maths

Name Preview Code
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 □

Fractions

Name Preview Code
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 Numerals

Name Preview Code
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 Ⅻ

A few notes

There are some rendering differences between these symbols across operating symbols. This is caused by the different font families that are used. Also, iOS and Android replace some Unicode characters with emoji, so be sure to test there to make sure that this doesn’t happen and the icons show as intended. Have fun coding! :)

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more
Web Browser Frame DevKit Box Mouse Cursor
by Danny Markov

Danny is Tutorialzine's Bootstrap and HTML5 expert. When he is not in the office, you can usually find him riding his bike and coding on his laptop in the park.

1Share this post
2Read one more article
3Get your free book
Book Cover
jQuery Trickshots

Tutorialzine's advanced jQuery techniques book.

Download

12 Comments

  1. nicolas says:

    Thanks for the tip !
    But on my Mac, running OS X, some of the icons can't be displayed such as all of the Zodiac's category...

    1. Danny Markov says:

      Thank you for the reply! We've removed all the icons that didn't appear on OS X.

  2. Deeds says:

    Nice article :D

  3. Kalo says:

    Excellent collection! Thank you! :)

  4. Equinox e Services says:

    Really interesting to note, its good to use these characters rather than images, however we see bigger greater than signs used in next button, how do they get it.

    Could you please let us know.

    Team - Equinox e Services

    1. Danny Markov says:

      As always there are many ways to approach this :).

      What you've seen could be this font awesome sign : http://fortawesome.github.io/Font-Awesome/icon/chevron-right/.

      Another possible option is a shape made out of CSS modified elements (2 straight lines - rotated 45deg and -45deg), which is the way we do it most of the time.

      Hope i helped.

  5. Larry says:

    Great article! If you're interested, I'm using Windows 8.1 (ugh!) and Google Chrome; the following symbols don't display

    Warning Sign ☺
    Recycle ♻
    Northwest Arrow to Corner ⇱
    South East Arrow to Corner ⇲
    Square □ (shouldn't it be ■)

    All of the Dice

    1. Danny Markov says:

      Thanks for pointing that out, we looked into it and removed those.

  6. Al says:

    Nice article, it would be nice to know where to find the entire list as I looked at the unicode site briefly and could not find the icons only emoticons.

  7. Venkat says:

    Good resource for looking up symbols. I've started using these in web development: for example/ a right arrow Unicode symbol instead of a right arrow picture. The only issue is that the symbols aren't always consistently rendered across browsers/devices but it's usually close enough. Here's a resource that's helpful just for the heart symbols: HeartSymbol.love

  8. Helene says:

    These codes, for some reason, don't work when I copy/paste them on my facebook comment...

  9. Melanie says:

    Thanks for these! Do you know if these will work in outlook as well?

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links