Usage Guide

Codicons can be used in several ways depending on your project's needs: as a CSS icon font, as an SVG sprite, or programmatically in TypeScript.

Using CSS Classes

The most common method is to use the provided CSS classes. After installing and setting up the codicon.css stylesheet, you can render any icon by applying two classes to an element (typically a <span> or <i>):

1. The base class codicon.
2. The specific icon class, codicon-[icon-name], where [icon-name] is the name of the icon.

<!-- Example: Displaying the 'add' icon -->
<i class="codicon codicon-add"></i>

<!-- Example: Displaying the 'source-control' icon -->
<span class="codicon codicon-source-control"></span>

It is recommended to use a single, empty element for each icon and not to add child elements to it.

You can find a complete list of all icon names in the Icon Reference.

Using SVG Sprites

If your project prefers SVGs over web fonts, you can use the generated codicon.svg sprite file. This method involves using the <svg> and <use> elements to reference an icon by its ID from the sprite sheet.

<!-- Make sure the path to codicon.svg is correct for your project structure -->

<!-- Example: Displaying the 'add' icon -->
<svg width="16" height="16">
    <use xlink:href="path/to/dist/codicon.svg#add" />
</svg>

<!-- Example: Displaying the 'source-control' icon -->
<svg width="16" height="16">
    <use xlink:href="path/to/dist/codicon.svg#source-control" />
</svg>

For VS Code Extensions

If you are building a Visual Studio Code extension and want to use Codicons within a webview, it is highly recommended to follow the official sample:

• Webview Codicons Sample

This sample demonstrates the best practices for loading the Codicon stylesheet from within the extension context, ensuring that icons render correctly and respect the user's current VS Code theme.

Programmatic Usage with TypeScript

The codiconsLibrary.ts file provides a convenient way to reference icons in TypeScript or JavaScript code. It exports a codiconsLibrary object where keys are camelCased icon names and values are objects containing the icon's ID and hex codepoint.

import { codiconsLibrary } from '@vscode/codicons/dist/codiconsLibrary';

// Get information for the 'add' icon
const addIcon = codiconsLibrary.add;

console.log(addIcon.id); // 'add'
console.log(addIcon.hex); // '0xea60'

// Example of creating an icon element programmatically
const iconElement = document.createElement('i');
iconElement.classList.add('codicon', `codicon-${addIcon.id}`);
document.body.appendChild(iconElement);