How to add your custom icons to vscode-icons

Photo by Harpal Singh on Unsplash

The day before yesterday, I installed vscode-icons and learned how to create a project based on Next.js. I found that there is no default icon for next.config.js, so I tried to read the document from official wiki and spent all the morning on how to do.

Because there seems to be little posts teaching how to add custom icons, I want to write a post to share the steps how I create my own icons for specific types of files.

Step 1

The basic step is to install vscode-icons into your VSCode from marketplace.

After get installed, then go to your extension setting page by two ways:

• File > Preferences > Settings > Extensions
• [Ctrl+,] > Extensions

You will see vscode-icons configuration:

Step 2

To make vscode-icons successfully read your icons, you have to place the image files at the folder according to your VSCode mode and version.

For example, if your VSCode is installed modeand stable version, your folder will be:
C:\Users\<your_user>\AppData\Roaming\Code\User\vsicons-custom-icons

So, just create folder named vsicons-custom-iconsat the specific folder.

p.s. with 7.11.0, vscode-icons provides a new setting — vsicons.customIconFolderPath, you can set path to the folder containing vsicons-custom-icons.

Step 3

For your custom icons(or file extensions), we need to add vsicons.associations.filesto setting.json.

vsicons.associations.filesmust be an array and each element in the array have to follow the template:

{
  "icon": <icon-filename>,
  "extensions": [<ext1>, <ext2>, ...],
  "format": <icon-image-format>,
  "filename": boolean,
  "filenamesGlob": [],
  "extensionsGlob": [],
  "light": boolean
}

• icon: this attribute will affect the filename of image file where the custom icon is stored.

According to the naming convention of vscode-icons, we have to set the filename of icon to be file_type_<ico-filename>.
For example, if we have this attribute be test-icon, then the filename of icon image must be file_type_test-icon.

• extensions: the file extensions that you want to apply custom icon to.

For example, if we want to apply test-icon to those files whose extensions are ext1 and ext2, then set the attribute to be [“ext1”, “ext2”].
After done, as long as we have files like fs.ext1 or fs.ext2, their icons will be test-icon.

• format: the extension of icon image file. For details about what kinds of image extensions are supported, you can see here.
• filename: a boolean value that determines how the attribute extensions is treated. (default value is false)

If this attribute is set to false, then vscode-icons will apply custom icon to those files whose extensions match one of options in attribute extensions.
That is, it just behaves as normal operation.

However, when you set it to true, only when the whole filename including extension matches one of options does vscode-icons apply your custom icons to that file.

For example, assume that we set extensions to [“file.ext1”], that means it only applies the icon to file.ext1 without partial match.

• filenamesGlob & extensionsGlob

As their attribute names, when we want to give more options for filenames instead of only having extensions, we can use these two attributes.

For instance, if we design the following matching rules:

1. filename must be file1 or file2
2. extension must be ext1 or ext2

Then there are four combinations be considered valid:

• *.file1.ext1
• *.file1.ext2
• *.file2.ext1
• *.file2.ext2

p.s. * stands for wildcard character asterisk.

There are two steps to parse:

(1)
If there is an untested option in extensionsGlob, we test if it is the substring of the filename(including extension) from the end of filename.
For example, “ext1” is the substring of “file1.ext1” from the end, but “file1” is not.
If matching, we can take the whole filename as [filename].[extension].
(2)
For the [filename] part, we do the same thing in previous step in filenamesGlob.
If there is also a solution, then we apply the icon to the file; otherwise, go to (1).

Note that if attribute filename is set to true, vscode-icons will disable wildcard character matching. That is, the [filename] must exactly match the option.

Hence, fs1.fs2.ext1 isn’t consider valid when filenamesGlob is set to [“fs2”] ,extensionsGlob is set to [“ext1”] and filename is true.

• light: a boolean value that means if the icon supports light theme in VSCode.

If it is set to true, you can add an image file named file_type_light_<ico-filename> to vsicons-custom-icons.

So, when VSCode theme switches to any of light themes, the icon image also changes to light theme.

Sum it up

According to above tutorial, we can define a custom icon for environment variable file. It supports the following filenames:

1. .env
2. .env.production
3. .env.local

Keep in mind

Never leave filenamesGlob empty or add empty string in it. If attribute filename is set to true, there is no effect. However, if false, except for your need, any file with matched extension will be applied. This may override some default icons in vscode-icons.

Now it is your turn to create your own icons!
Hope you have understood the steps how to add custom icons into vscode-icons.

If there is any error in my article, please let me know and thanks for your comments😃.

🎨Author information:

• Github: https://github.com/chih-hsi-chen
• Codepen: https://codepen.io/chih-hsi-chen
• Email: chih.hsi.chen@gmail.com

📕References:

• vscode-icons official wiki