Coding

Unicode Icons – A faster, lightweight alternative to Fontawesome icons

Unicode Icons – A faster, lightweight alternative to Fontawesome icons

If you’re building a website you’ll probably want to use icons and might opt for using FontAwesome or something similar.

FontAwesome is great, and there are lots of other great free and paid icon libraries out there – but they also tend to increase the page load times of your website by calling extra resources.

Speed is an important factor in both SEO and user experience. Nobody likes slow websites (and Google especially doesn’t either).

There is a lightweight alternative and that’s to use Unicode icons. The great news is that you don’t need to do anything to use Unicode icons, symbols, and characters.

How to use these Unicode icons

Unicode icons are regular text and you can just copy and paste them into your html as long as the encoding is UTF-8.

  • Find a Unicode icon to use below or using this useful Unicode icons website
  • Copy the html code for the icon
  • For HTML: Paste the icon in to your html code
  • For CSS: Use the value in the content property
  • For JS and PHP: Use the text in strings
  • Customise the styling of the Unicode icon

Most Popular Unicode Icons

Here are some of the most popular Unicode icons used and ones that I use in most projects.

Black Star★
White Star☆
Check Mark✔
Cross Mark✘
Right Black Pointer►