How to change an icon of the folder in VS code?

Question

I use this plugin https://github.com/robertohuertasm/vscode-icons

It changes the icon of the files which is nice. I want to give an icon to a specific folder. Like a different icon to the folder which has all CSS files. I know icon of .css and CSS folder should not be the same so I want to have different icons for file and folder. The same I would like to have for javascript folder.

Not sure it's possible or not, though.

Solution

I just installed the vscode-extensions icon from the extension management panel in vscode and it already DOES have different icons for folders called CSS and .css files.

If you want to add your custom icons, there is currently no easy way to do this. Writing about per-rule theme overrides, @aeschli wrote that the team "currently has no plans to do this"

You can, however, fork whichever theme you like and add the custom mappings yourself and/or make a pull request against the original theme. The api describes in detail what to do, but in summary you would associate a folder name with an icon name and that icon name with an actual icon by modifying icons.json:

"iconDefinitions": {
    "_my_folder": {
        "iconPath": "./images/My_Folder_16x_.svg"
    }
},
"folderNames": {
    ".vscode": "_my_folder",
},

Comments

[Jitendra Vyas]

I don't need custom icon if an extension already has but name of my folder is styles not css.

[Llewey]

Which is why my answer specified two important things: 1. vscode does not support quick customizations of color or icon themes 2. You can achieve this by forking the extension and adding any custom mapping you'd like, so you can map a "style" folder to the icon that is also mapped to the "css" folder