Skip to content
Jimi (Dimitris) Charalampidis edited this page Apr 7, 2019 · 8 revisions

Custom Icons

In order to place your custom icons you will have to create a specific folder named vsicons-custom-icons.

On Installed mode, depending on your OS the path will be:

  • Windows: C:\Users\<your_user>\AppData\Roaming\<Code Folder>\User\vsicons-custom-icons
  • Linux: /home/<your_user>/.config/<Code Folder>/User/vsicons-custom-icons
  • Mac: /Users/<your_user>/Library/Application Support/<Code Folder>/User/vsicons-custom-icons

<Code Folder> refers to the name of the folder of VSCode depending on the version:

  • Code for the stable version.
  • Code - Insiders for the insiders version.
  • Code - OSS for the 3rd party distribution version.
  • code-oss-dev for the development version.

On Portable mode, depending on your OS the path will be:

  • Windows: <path_to_the_application>\<Data Folder>\user-data\vsicons-custom-icons
  • Linux: <path_to_the_application>/<Data Folder>/user-data/vsicons-custom-icons
  • Mac: <path_to_the_application>/<Data Folder>/user-data/vsicons-custom-icons

<Data Folder> refers to the name of the folder where VSCode stores the data depending on the OS:

  • data for Windows and Linux, no matter the VSCode version.
  • code-portable-data for Mac and the stable VSCode version.
  • code-insiders-portable-data for Mac and the insiders VSCode version.

More info on Portable Mode can be found here.

Once you have created the folder you can put all your custom icons there. But, again, they have to follow vscode-icons naming conventions:

  • Files: file_type_<value_of_icon_property>.svg
  • Folders: folder_type_<value_of_icon_property>.svg & folder_type_<value_of_icon_property>_opened.svg
  • Default Files & Folders: default_<value_of_icon_property>.svg

For example if you have declared a new icon like:

{ "icon": "my-awesome-icon", "extensions": ["mai"], "format": "svg" }

then for file icons the filename of the icon must be

  • file_type_my-awesome-icon.svg

and for folder icons

  • folder_type_my-awesome-icon.svg
  • folder_type_my-awesome-icon_opened.svg

Note that folders must have two icons!!

See here the supported file extensions for an icon.

With 7.11.0, we shipped a new feature allowing you to provide your own specific custom icons folder path. This can be useful if you have a network share with your team or you want to deliver your own icons along your own repository.

If you want to take advantage of this feature, just go to your settings and set vsicons.customIconFolderPath with the path to the folder containing the vsicons-custom-icons folder.

Note that the name of the folder containing the icons must be vsicons-custom-icons.

You have to specifically set the path, to the folder where this folder is going to be placed, not the folder itself. This is very important as it may lead to confusion.

i.e. If the path to the above folder is /path/to/custom/icons/folder/vsicons-custom-icons/, then the path set in the configuration has to be /path/to/custom/icons/folder/.

You can’t perform that action at this time.