What you’ll build:
your own custom VSCode icon theme! This is relatively quick and you will mostly just be modifying 2 JSON files.
Set up
- Open your terminal and set up the base template by entering:
npm install -g yo generator-code
yo code- It will prompt you for options:
- What type of extension do you want to create? New Color Theme
- Do you want to import or convert an existing TextMate color theme? No, start fresh
- Select a base theme: choose any option, this doesn’t matter
- Initialize a git repository? Y
⁕ Helpful: https://code.visualstudio.com/api/get-started/your-first-extension
3. Open your newly created folder in VSCode!
Let’s get to it!
- Delete the themes folder. Since we’re not making a color theme, we won’t need it.
2. Create folder called images and put all your icon image files in it. They should be pretty small. Try looking for free icons online!
3. Create a file called icons.json . This will be the meat of your extension.
4. Let’s start by changing all files to the same icon. Copy this into the file, and replace croissant.svg with your own image file name.
{
"iconDefinitions": {
"_file": {
"iconPath": "images/croissant.svg"
},
},
"file": "_file"
}Set up package.json
1. Open the package.json file. Replace the contents of the contributes section with this:
"contributes": {
"iconThemes": [
{
"id": "vscode-catcafe-icon-theme", // use your extension name here
"label": "Cat Cafe Icon Theme", // use your own name here
"path": "icons.json"
}
]
},Don’t forget to remove the comments (//) otherwise it won’t work!
⁕ Helpful: https://code.visualstudio.com/api/references/contribution-points#contributes.iconThemes
2. Add a publisher name field
"publisher": "YOUR NAME HERE!",3. Your package.json file should look something like this:
{
"name": "vscode-cat-cafe-icon-theme",
"displayName": "vscode-cat-cafe-icon-theme",
"description": "cozy cat cafe icons",
"publisher": "YOUR NAME HERE!",
"version": "0.0.1",
"engines": {
"vscode": "^1.75.0"
},
"categories": [
"Themes"
],
"contributes": {
"iconThemes": [
{
"label": "Cat Cafe Icon Theme",
"id": "vscode-cat-cafe-icon-theme",
"path": "icons.json"
}
]
}
}Your project directory should now look something like this:
Testing
To see your changes in action, press F5 in VSCode. It should open up a new VSCode window that says [Extension Development Host] on top. You can open any existing folders from there to preview your extension! All the files should be showing your new icon.
More customizations!
Assigning images based on file extensions
You can use the example below to make all .css files show strawberry.svg icon and all other files show croissant.svg. Don’t forget to use the actual names of your image files in your images folder or this won’t work!
{
"iconDefinitions": {
"_file": {
"iconPath": "images/croissant.svg"
},
"_css": {
"iconPath": "images/strawberry.svg"
}
},
"file": "_file",
"fileExtensions": {
"css": "_css"
}
}Assigning multiple extensions to the same image
You might want to do something where, for example, all image file types show the same icon. You can simply assign all image file extensions to the same iconDefinitions name.
// This will make all .jpg, .jpeg, .png, .svg files show strawberry.svg icon
{
"iconDefinitions": {
"_allImageTypes": {
"iconPath": "images/strawberry.svg"
}
},
"fileExtensions": {
"png": "_allImageTypes",
"svg": "_allImageTypes",
"jpg": "_allImageTypes",
"jpeg": "_allImageTypes"
}
}Use your icon theme!
The manual way
- Open your .vscode/extensions folder. You can access it by going to your root directory in your terminal and entering:
cd .vscode/extensions
open .2. Copy your whole icon theme folder and paste it into the extensions folder.
3. When you open your list of installed extensions in VSCode, you should be able to see your new icon theme!
4. You can send your friends your extension folder so they can use it too!
⁕ Helpful: https://code.visualstudio.com/api/working-with-extensions/publishing-extension#your-extension-folder
The packaging way
⁕ Somehow this didn’t work for me, so let me know if you can get it working!
Instead of sending people your whole extension folder or having to move your files manually into .vscode/extensions , there’s a handy command to zip up your files and install them!
- In the terminal, in your extension’s root directory, run this to create a .vsix file:
vsce package2. Now run this to install your extension into your VSCode:
code --install-extension my-extension-0.0.1.vsix⁕ Helpful: https://code.visualstudio.com/api/working-with-extensions/publishing-extension#packaging-extensions
Publish it to the VSCode marketplace!
Update package.json
If you want to publish your extension to the VSCode marketplace, you’d probably want to add some additional fields to make your extension look nicer and be more searchable!
- Github repo + extension icon
"icon": "icons/Spangle.png",
"repository": {
"type": "git",
"url": "https://github.com/klyap/vscode-stardew-icon-theme.git"
},You will have a Github url after you’ve pushed your project to a remote branch. The image file here cannot be SVG due to security concerns, and should be larger than your file icon files since it shows up a lot bigger.
2. Version number
This will already be there, but note that you will need to increase this number each time you publish to the marketplace.
"version": "0.0.1",3. Keywords
Adding a list of relevant tags will help users find your extension when searching!
"keywords": [
"icons",
"theme",
"pixel",
"icon",
"cute",
"game",
"stardew",
"valley",
"cozy",
"cat",
"farm"
],Actually publish!
Follow instructions at:
When you’re done, you should have something like this:
Finished code sample
Feel free to just clone and modify this repo if you don’t want to go through the setup steps! You can just replace the icons with your own and update the package.json to reflect your new theme’s name.
