Icon Classes

Icon Classes enhances the development experience by providing Visual Studio Code users with icon completion, hover previews, inline icon decorations, and a searchable icon browser.

Installation

Install via the Visual Studio Code Marketplace →

In order for the extension to activate you must have a supported icon definition file in your workspace. By default the extension looks for icomoon*.svg, but this can be customized.

What’s New

• Searchable Icon Browser panel
• Status bar button for quick access
• Configurable icon file glob pattern
• Configurable icon class prefix
• Inline icon decorations for matching classes
• Support for HTML, JS, TS, JSX, TSX, CSS, SCSS, Vue, and Svelte

Features

Icon Browser

Open the browser with the command palette or the status bar button:

• Icon Classes: Open Icon Browser

Browse all available icons, filter by name, and click any icon to copy its class name.

Autocomplete

Intelligent suggestions for icon class names while typing in supported files.

Hover Preview

Hover over icon-* class names to see the icon preview and CSS snippet.

Inline Previews

See a small icon preview directly next to matching icon class names in the editor.

Configuration

Available settings:

• iconClasses.iconFilePattern — glob pattern used to locate icon definition files.
• iconClasses.iconClassPrefix — class prefix used for icon class detection.

Usage

1. Add an icon definition file to your workspace (default: icomoon*.svg).
2. Open a supported file.
3. Use autocomplete and hover over icon-* class names.
4. Click the status bar button to open the Icon Browser.

Notes

If you customize the icon prefix, update your code values and restart the extension if needed.