HTML icons unicode characters

HTML icons reference – Unicode character list & CSS3 buttons

In this tutorial I’m going to show you how to create some amazing HTML icons – they’re not images, but unicode font characters. Anybody can insert them into their website – they’re free and require no scripts or fancy coding knowledge. All you need to do is copy and paste their unique identifying code and style them as you would any other word on your website.

OK, let’s get going ☞ make yourself a nice  put on some  get a notepad and . Don’t answer the , put away that  !? as some cool, five- HTML icons are to make you .

What are HTML / Unicode icons?

Unicode icons are essentially universal font characters. They come either in the shape of traditional language characters like those used in Latin (English), Chinese, Greek, Arabic, Hindi etc, but also simple two-dimensional monochromatic icons, like those used in mathematics or astrology. They are used across the computing world and are fairly universal within common web fonts like Helvetica or Times New Roman. There are literally thousands of unicode characters and we’ve done the hard work for you and found the most popular, easy-to-use and interesting for those wanting something a little more pictorial than just a $ sign.

How do I insert an HTML icon into my website?

In order to insert these icons you need access to enter raw HTML code into your web page. For example on a WordPress website you would need to switch over to Text edit mode then copy and paste the icon’s HTML identifier.

WordPress Visual Text Edit Modes

As mentioned before, you are inserting a font character, so you can freely change the size and colour as you would any other font. The icon will scale beautifully and not become pixelated when rescaled – perfect for ipads and retina displays. Emboldening and italicised stylings obviously won’t work. :(

[aside]It is worth mentioning that not all icons are available when using certain fonts. If you see a blank square rather than the icon you were expecting – change the font to a more generic web font like Helvetica or Times New Roman. Even these fonts have their limitations – some alternative font options for rare unicode icons are Universalia, Symbola and Segoe UI Emoji.[/aside]

The following table has been split into loose categories showing the icon, a short description and the all important HTML code for you to copy into your website. The last column displays the icon’s unique unicode number, this is useful if you’d like to create some buttons using a bit of CSS3. A little further on I’ll show you how you can do this.

OK, have fun and let us know your favourite icons and perhaps any interesting ways you’ve implemented them. Go, go, go…

Our hand-picked reference guide to popular HTML icons / Unicode character symbols

Icon Description HTML (COPY FOR DIRECT INPUT) UNICODE (FOR CSS USE)

SMILIES / FACE ICONS

Smiling Face – Filled ☻ 263B
Smiling Face – Outline ☺ 263A
Sad Face ☹ 2639

CARD SUITS ICONS

Heart – Filled ♥ 2665
Heart – Outline ♡ 2661
Shades Suit – Filled ♠ 2660
Shades Suit – Outline ♤ 2664
Diamond – Filled ♦ 2666
Diamond – Outline ♢ 2662
Clubs Suit – Filled ♣ 2663
Clubs Suit – Outline ♧ 2667

FUN SYMBOLIC ICONS

Hot beverage – Cup of coffee/tea ☕ 2615
Yin Yang Symbol ☯ 262F
Peace Symbol ☮ 262E
Shamrock ☘ 2618
Heavy Heart – Filled ❤ 2764
Floral Heart ❦ 2766
Atom Symbol ⚛ 269B
Skull & Crossbones ☠ 2620
Radioactive / Toxic ☢ 2622
Biohazard ☣ 2623
Ship wheel – Wheel of Dharma ☸ 2638
Anchor ⚓ 2693
Flag – Outline ⚐ 2690
Flag – Filled ⚑ 2691
Female Symbol ♀ 2640
Male Symbol ♂ 2642
Scissors Outline ✄ 2704
Scissors Filled ✂ 2702
Scissors Cutting ✁ 2701
Florette / Flower ✿ 273F
Florette / Flower Outline ❀ 2740
Celtic Flower/Star  F80A
Fleur-de-lis ⚜ 269C
Fleur-de-lis 2  F83D

USEFUL ICONS

Warning Symbol ⚠ 26A0
Writing Hand ✍ 270D
Pencil Lower Right ✎ 270E
Pencil Right ✏ 270F
Pencil Upper Right ✐ 2710
Pencil Lower Left  F802
Checkmark / Tick ✓ 2713
Heavy Checkmark / Heavy Tick ✔ 2714
Ballot / Cross ✗ 2717
Heavy Ballot X ✘ 2718
Disabled Symbol ♿ 267F
Recycling Symbol – Filled ♻ 267B
Recycling Symbol – Outline ♲ 2672
Recycling – General ♺ 267A

STARS – RATINGS / REVIEWS

Star – Black ★ 2605
Star – White ☆ 2606
Star Shadowed ✰ 2730
Open Centred Star ✫ 272B
Stressed Outline Star ✩ 2729
Outlined Star ✭ 272D
Heavy Outlined Star Icon ✮ 272E
Pinwheel Star Icon ✯ 272F
Circled Star ✪ 272A
Open Centre Asterisk ✲ 2732
Filled Heavy Asterisk ✱ 2731
Six Pointed Star ✶ 2736
Eight Spoke Asterisk ✳ 2733
Eight Pointed Star ✴ 2734
Eight Pointed Pinwheel ✵ 2735
Eight Pointed Rectilinear Star ✷ 2737
Twelve Pointed Star ✹ 2739

ARROWS AND POINTING FINGERS ICONS

Thin Right Arrow ➝ 279D
Regular Right Arrow ➞ 279E
Heavy Arrow Right ➡ 27A1
Tapered Right Arrow ➙ 2799
Feathered Arrow Right ➸ 27B8
Feathered Arrow Right – Outline ➳ 27B3
Curved Arrow Down and Right ➥ 27A5
Arrowhead Right ➤ 27A4
Arrowhead Right with Shadow ➣ 27A3
Curved Arrow Right Down ⤵ 2935
Curved Arrow Right Up ⤴ 2934
Curved Arrow Down Left ⤶ 2936
Curved Arrow Down Right ⤷ 2937
Pointing left – Black ☚ 261A
Pointing right – Black ☛ 261B
Pointing left – White ☜ 261C
Pointing up – White ☝ 261D
Pointing right – White ☞ 261E
Pointing down – White ☟ 261F
Right pointing triangle – Filled ▶ 25B6
Right pointing triangle – Outline ▷ 25B7
Heavy Pointed Simple Arrow Right ❯ 276F
Heavy Pointed Simple Arrow Left ❮ 276E

KEYBOARD / COMPUTING ICONS

Apple Mac  F8FF
Place of Interest (also Apple Command key) ⌘ 2318
Gear Symbol (Settings page) ⚙ 2699
Eject Symbol  F804
Alt Key ⌥ 2325
Return Key ⏎ 23CE
Delete Backward ⌫ 232B
Delete Forward ⌦ 2326

WEATHER RELATED ICONS

Sun ☀ 2600
Sun with rays ☼ 263C
Crescent Moon Left ☽ 263D
Crescent Moon Right ☾ 263E
Cloud ☁ 2601
Umbrella ☂ 2602
Umbrella with Rain ☔ 2614
Snowflake ❄ 2744
Tight Trifoliate Snowflake ❅ 2745
Heavy Chevron Snowflake ❆ 2746
Snowman ☃ 2603

TRAVEL & MAP RELATED ICONS

Airplane ✈ 2708
Information ℹ 2139
Compass Directional Arrows  F841

CONTACT DETAILS – TELEPHONE ICONS

Telephone – Black ☎ 260E
Telephone – White ☏ 260F
Telephone Location Icon ✆ 2706

MUSICAL NOTE ICONS

Quarter Note  ♩ 2669
Eighth Note ♪ 266A
Beamed Eighth Notes ♫ 266B
Beamed Sixteenth Notes ♬ 266C
Flat Musical Note ♭ 266D
Natural Musical Note ♮ 266E
Sharp Musical Note ♯ 266F

MATHEMATICAL & NUMBERS

Numero / Number № 2116
½ One Half Fraction ½ 00BD
One Third Fraction ⅓ 2153
Two Thirds Fraction ⅔ 2154
¼ One Quarter Fraction ¼ 00BC
¾ Three Quarters Fraction ¾ 00BE
One Fifth Fraction ⅕ 2155
One Sixth Fraction ⅙ 2159
One Eighth Fraction ⅛ 215B
Square Root Symbol √ 221A
Infinity symbol ∞ 221E
Less than or equal to Symbol ≤ 2264
More than or equal to ≥ 2265

ZODIAC SYMBOLS

Aries symbol ♈ 2648
Taurus symbol ♉ 2649
Gemini symbol ♊ 264A
Cancer symbol ♋ 264B
Leo Symbol ♌ 264C
Virgo Symbol ♍ 264D
Libra Symbol ♎ 264E
Scorpius Symbol ♏ 264F
Sagittarius Symbol ♐ 2650
Capricorn Symbol ♑ 2651
Aquarius Symbol ♒ 2652
Pisces Symbol ♓ 2653

Are we missing an icon? Let us know in a comment below.

Creating CSS3 buttons – a short introduction

Using some CSS coding tricks we can implement unicode icons directly into button designs.

For example:

Save

 

The HTML code you can use to recreate this button is:

<div class="unicode-button">Save</div>

or even this:

<button type="submit" value="Save" class="unicode-button">Save</button>

The CSS is this:

.unicode-button { 
  display: inline-block;
  white-space: nowrap;
  width: auto;
  padding: 8px 15px; 
  margin: 0.5em 0;
  font-size: 1em;  
  color: white;
  background-color: #3399cc; 
  border-radius: 7px; 
  -webkit-border-radius: 7px; 
  -moz-border-radius: 7px; 
  transition: all 300ms ease; 
  border:0;
  box-shadow:none;
  text-shadow:none;
}

button.unicode-button {
  cursor: pointer;
  overflow: visible;
}

.unicode-button:before { 
  content: "\2714"; 
  padding-right: 10px; 
}

.unicode-button:focus {
 outline: 0;
}

.unicode-button:hover { 
  opacity: 0.9; 
  transition: all 180ms ease; 
}

You’ll notice that we’ve placed the unicode for the chosen checkmark symbol 2714 into the :before pseudo style. The content attribute requires quotation marks and as it’s a unicode we need a preceding backward slash character. A few other transitional niceties for modern browsers and that’s it.

Summary – HTML icons aka Unicode characters – a reference list

So to summarise – if you’re just after a few icons or two, just copy the HTML code and paste it straight in. Job done.

If you’re looking to insert the icons into buttons or other more complex HTML objects, copy and paste the Unicode number into a :before pseudo class in your CSS stylesheet.

I hope you found this article useful. You can follow this blog below to receive new post notifications via email ✉ (that’s a bonus icon! – ‘The Envelope’ – HTML &#9993; Unicode 2709)

Articles on CSS3 tricks to create buttons coming soon!

Best,
The Zaposphere Team

Posted in Design Studio, WordPressTagged , , , , , , ,

Free WordPress tips for your inbox

Have our latest blog posts delivered straight to your inbox.

Ask a question or write a comment here…