Use Font Awesome or MUI as Sitecore Icons

This is a copy of my blog post originally posted here to keep all things in one place.

  If you read the title of the article, understand everything from the title, and you are impatient to try FA or MUI icons on Sitecore instance by yourself then you may download Sitecore packages on Github. But if you want the full story, grab a cup of tea and enjoy it below.

There are 8755 icons in the latest Sitecore version 10.2. But the major of icons was added a long time ago. They are still good and you can cover 95% of your needs. But when you need an icon for some brand(Azure, Amazon, Google), you are in trouble. Also if want an icon for something relatively new (NFT, Bitcoin, Coronavirus), you are also in trouble. There are no such icons. And sometimes, you just can’t find the right icon for your specific case and need to use another compromise icon.

I understand Sitecore. They need don’t violate property rights with brand icons. We, as website developers, don’t have so strict limitations as we implement the site on Sitecore and don’t sell it with brand icons. Also, Sitecore needs to keep backward compatibility. You, as a customer, don’t want to see an icon, that you used for your website, disappeared in the new version. Even if it is an icon for PCI Card Network. You should keep it, because someone may use it in their implementation. Also, adding a new set of icons increases mess. You already have almost 10k icons, almost for everything. Why do you need one more icon for a car? And it is impossible to make every customer happy. One set of icons will be suitable for a car dealer, but completely another for a hotel chain.

On the other hand, icon libraries become very popular in the last few years. If you are a web developer then you definitely had a project, where you used Font Awesome. Or if you make your website using Material UI, you probably used icons from this library. Why don’t use the same icons for the Sitecore backend? It will make content editors happy. All that we need is to convert icons from one format to another and make small Sitecore adjustments to be able to use new icons.

Sitecore icons are saved in PNG format, but all modern icon libraries have SVG format. The SVG format is a subset of XML, we can easily process these files, and change size and colors. And there are millions of tools for converting images from one format to another. I selected ImageMagick, it fully fits our needs.

Both FA and MUI icons are provided in one color. During processing, we are able to add as many colors as we need. I added 4 colors: blue, red, green, and black. But that could be easily changed. You may have fewer or more colors. You can use your brand colors as well to make everything look consistent.

How to use it?

1. Read the documentation on GitHub
2. Go to releases
3. Download latest release package
4. Login to Sitecore Desktop
5. Open Development Tools > Installation Wizard
6. Upload the package that you have downloaded
7. Install it and enjoy FA and MUI icons on your Sitecore instance.

And that is why I love open source. You can grab a free set of icons, process them using free open source tools, host everything on GitHub, automate everything using GitHub Actions and share your results with others. You take something, you give something. Everyone is happy.

And Special thanks to Viet Hoang, who back in 2017 wrote an article about changing Sitecore icons that is still actual in 2022.