Installation

Integrating Codicons into your project is straightforward using the official NPM package.

Installing via NPM

The recommended way to install Codicons is through npm or your preferred package manager.

npm i @vscode/codicons

Note: The older package name vscode-codicons has been deprecated in favor of the scoped package @vscode/codicons.

Package Contents

After installation, the package will be available in your node_modules/@vscode/codicons/ directory. The key files are located in the dist/ folder:

  • codicon.css: The primary stylesheet. Include this in your project to use the icons with CSS classes.
  • codicon.ttf: The TrueType font file. This is the core icon font, referenced by codicon.css.
  • codicon.svg: An SVG sprite file, providing an alternative method for using the icons without relying on web fonts.
  • codiconsLibrary.ts: A TypeScript file that exports an object mapping all icon names to their respective CSS class and codepoint. This is useful for programmatic access in TypeScript projects.
  • codicon.html: A local copy of the icon preview and search page.
  • codicon.csv: A CSV file mapping icon names to their character and Unicode representations.

Basic Setup

To use the icon font, you'll need to include the codicon.css file in your project. If you're using a bundler like Webpack or Vite, you can import it directly into your JavaScript or CSS entry point:

// In your main JavaScript file
import '@vscode/codicons/dist/codicon.css';

Alternatively, you can include it directly in your HTML:

<link href="node_modules/@vscode/codicons/dist/codicon.css" rel="stylesheet">

With the stylesheet loaded, you can now start using the icons as described in the Usage Guide.