Icon

• Docs
• API

To use the icons, the codicons.css file must be included in the page:

<link rel="stylesheet" href="path/to/codicon.css" id="vscode-codicon-stylesheet">

Caution

Note the required id on the link element! To use web fonts in web components, the component needs to include the font stylesheet in addition to the page. This id serves as a lookup so the icon component can automatically create and insert it’s own link tag.

Basic example

HTML

<!--
  Download codicons from https://github.com/microsoft/vscode-codicons

  Note the required `id` on the link element!
  To use web fonts in web components, the component needs to include
  the font stylesheet in addition to the page. This id serves as a lookup so
  the icon component can automatically create and insert it's own link tag.
-->
<link
  rel="stylesheet"
  href="path/to/codicon.css"
  id="vscode-codicon-stylesheet"
/>

<vscode-icon name="account"></vscode-icon>
<vscode-icon name="account" size="32"></vscode-icon>
<vscode-icon name="account" size="48"></vscode-icon>
<vscode-icon name="account" size="64"></vscode-icon>

Action icons

HTML

<vscode-icon name="account" action-icon></vscode-icon>
<vscode-icon name="add" action-icon></vscode-icon>
<vscode-icon name="git-compare" action-icon></vscode-icon>

Animated icons

HTML

<vscode-icon name="loading" spin spin-duration="1"></vscode-icon>
<vscode-icon name="sync" spin></vscode-icon>
<vscode-icon name="gear" spin spin-duration="2"></vscode-icon>

List of icons

For the searchable list, see the project page.