GitHub Material Icons

@1chooo | Nov 15, 2024 | 2 min read

... views

Takeaway: Go to Chrome Web Store and install "Material Icons for GitHub"

As a heavy user of GitHub and VSCode, I often find ways to enhance my workflow. One such way is by using the Material Icons for GitHub Chrome extension, which transforms the file icons on GitHub to resemble those in VSCode.

Today, I will show you how to give your GitHub repos a step-by-step makeover with VS Code's Material Icons. Let's dive in.

In the original state of GitHub, the file icon looks like this:

The original state of GitHub

It's great, but we still can make it better. With the help of Material Icons for GitHub, we can make the file icon look like this:

After using Material Icons for GitHub

All we need to do is install the plugin and pick up the style we like. It's very easy to use. Just click the icon on the top right corner of your Chrome-based browser, and you will see several choices. You can pick up the style you liked.

First, visit the Chrome Web Store and search for "Material Icons for GitHub". Then, click the "Add to Chrome" button to install it.

Here is the link: Material Icons for GitHub

Add to Chrome-based browser

You then go back to your GitHub page, let's take my website repo-1chooo.com as an example. You can see the file icon has been changed.

Demo of Material Icons for GitHub

Plus, you can click the icon on the top right corner of your Chrome-based browser and see several choices. You can pick up the style you like.

Several choices of Material Icons for GitHub

What I take is React Pack because it's the same as my VSCode.

My settings of Material Icons for GitHub

To sum up, with the help of Material Icons for GitHub, you can give your GitHub repos a makeover with VS Code's Material Icons. It's very easy to use. Just install the plugin and pick up the style you like. I hope you enjoy it. 😊