UTF-8 icons can boost performance because you don't need to load an icon library (such as Font Awesome) or images. It has its own pitfalls though, for example all browsers show icons differently. Nevertheless UTF-8 icons are useful.
You can use UTF-8 icons in HTML pages by following some simple steps.
Specify the UTF-8 Charset in Meta Tag
You will need to declare the character encoding of the document as UTF-8 before UTF-8 icons can be displayed in it.
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />If this meta tag is not specified, you will see some garbage text being displayed instead of the correct UTF-8 symbol.
Adding UTF-8 Symbols to HTML
Directly using the character : You can directly enter the UTF-8 character in HTML (copy and paste). However you will need to take care that while saving the HTML file it should be saved with UTF-8 encoding.
Using HTML character code : Mostly you will find the UTF-8 code for the icon, such as U+1F600, U+263A etc. This code can be converted to a HTML special character that can be used in the HTML markup.
The process to convert the UTF-8 code to a HTML character code is simple. Simply take the code after the "+" sign. Then Prepend "&#x" and append ";"
For example U+1F600 would become 😀 (rendered as 😀)
U+263A would become ☺ (rendered as ☺)
Using HTML character code instead of directly using the UTF-8 icon is better for code maintenance also.