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.
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:
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 ✉ Unicode 2709)
Articles on CSS3 tricks to create buttons coming soon!
Best,
The Zaposphere Team
