Set icon or logo for extension in vscode

Question

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?

Neufer

Answer 1

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.

Opportunity

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. – Pivot

zanedp's issue: github.com/microsoft/vscode/issues/90900 – Bipropellant

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. – Tonkin

Answer 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"
  },

Condiment

Answer 3

You can set the icon in the extension's package.json file.You have to set the icon as svg or you can use the default icons like this //"icon": "$(heart)"

"activitybar": [
        {
          "id": "chatAI",
          "title": "Chat AI",
          "icon": "resources/chatbot-icon.svg",// Try to add the svg here
        }
      ]

Litmus