Skip to content
VSCode Elements

Icon

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">

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.

<!--
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>
<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>
<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>

For the searchable list, see the project page.