38

I've created an extension for vscode (not yet published, only installed localy), how can I set an icon to be seen in the section of the extensions in vscode?

Mauricio Gracia Gutierrez
  • 10,288
  • 6
  • 68
  • 99
asv
  • 3,332
  • 7
  • 24
  • 47

2 Answers2

56

You can set the icon in the extension's package.json file, which is also called "extension manifest".

The field in which you set the path to an icon is called "icon". The icon file itself has to be 128x128 pixels. As noted by Philipp Kief in the comments, you should use a PNG file, not an SVG.

Example:

{
    "name": "extension-name",
    "displayName": "Extension Name",
    "description": "...",
    "icon": "images/spellIcon.png",
    "version": "0.0.1",
      ...

More on VS Code's official page.

Fabian Lauer
  • 8,891
  • 4
  • 26
  • 35
  • 8
    When editing `package.json` in VS Code, if `repository` doesn't point to an `https`-served repo, you'll get the warning, "An icon requires a repository with HTTPS protocol to be specified in this package.json". But, `vsce` doesn't actually care and will build a VSIX for you anyway. – zanedp Feb 12 '20 at 22:36
  • 1
    zanedp's issue: https://github.com/microsoft/vscode/issues/90900 – Boris Verkhovskiy Jan 10 '22 at 00:04
  • During packaging of the extension, if we get an error like `The specified icon 'extension/images/icon.png' wasn't found in the extension`. Then, there is a chance that, the folder `images` is excluded as part of `.vscodeignore` file. – Arutsudar Arut Aug 01 '23 at 13:00
2

The above answer is legit. But when i added the icon in package.json. It gave me a wired error saying "HTTPS protocol is not specified". I fixed it by using the repository key in it as:

"icon": "assets/images/qs-icon.png",
  "repository": {
    "type": "git",
    "url": "https://github.com/Mubashar-javed/quick-snippets"
  },
Asad Ashraf
  • 1,425
  • 8
  • 19