Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/bastndev/Lynx-Theme-Pro/llms.txt

Use this file to discover all available pages before exploring further.

Beyond file and folder icons in the Explorer, VS Code exposes a second icon layer called the Product Icon Theme — the glyphs that make up the IDE’s own chrome: Activity Bar buttons, sidebar panel headers, Explorer toolbar actions (new file, new folder, refresh, collapse all), Source Control controls, the debug toolbar, the status bar, breadcrumb chevrons, and more. Lynx Theme Pro ships two purpose-built product icon themes that replace these defaults with a cohesive, modern aesthetic that complements any of the eight Lynx color themes.

Product Icons vs. File Icons

It is important to understand the distinction between the two icon systems in VS Code:
  • File Icon Theme — controls the icons shown next to files and folders in the Explorer sidebar. Activated via Preferences: File Icon Theme.
  • Product Icon Theme — controls the icons that form VS Code’s own UI chrome (Activity Bar, panel tabs, editor toolbar buttons, etc.). Activated via Preferences: Product Icon Theme.
Both settings are independent. You can have Lynx Icons - (Style A) active as your file icon theme and Lynx (Material) Icons active as your product icon theme at the same time, and each can be changed without affecting the other.
File Icon Themes decorate your project’s files and folders in the Explorer. Product Icon Themes replace the VS Code interface icons — the glyphs you click to switch between the Explorer, Search, Source Control, Extensions, and other Activity Bar views. Both can be active simultaneously.

The Two System Icon Themes

Lynx (Material) Icons — lynx-material-icons

Delivered as a custom WOFF font (lynx-material-icons.woff), this theme applies Material Design–inspired glyphs to all major VS Code product icon slots. It covers 651 icon definitions spanning the full range of IDE chrome: Activity Bar views (files, search, source-control, remote-explorer, extensions, account, settings-gear), Explorer toolbar actions (new-file, new-folder, refresh, collapse-all), Source Control controls (add, discard, check, git-branch), panel actions (split-horizontal, split-vertical, list-tree, list-flat), notifications (bell, bell-dot, error, warning, info), debug controls (debug-start, debug-pause, debug-step-over), and many more.

Lynx (Test) Icons — lynx-test-icons

An alternate product icon set also delivered as a WOFF font (lynx-test-icons.woff). It covers the same product icon slots as the Material variant but with a different glyph style — useful for developers who want to experiment with an alternate aesthetic or compare icon rendering approaches. The Test set is ideal for contributors who want a clear visual signal that a non-production icon set is active.

Activating System Icons

1

Open the Command Palette

Press Ctrl+Shift+P on Windows/Linux or ⌘Shift+P on macOS.
2

Run the Product Icon Theme command

Type and select Preferences: Product Icon Theme from the dropdown list.
3

Select a Lynx system icon theme

Choose one of the two Lynx product icon themes:
  • Lynx (Material) Icons — Material Design–inspired IDE chrome icons
  • Lynx (Test) Icons — Alternate icon set for a different visual style
VS Code switches the product icons immediately across the entire interface.

Covered UI Regions

When either Lynx product icon theme is active, the following VS Code UI areas display custom Lynx glyphs:
UI RegionExample icons
Activity BarFiles, Search, Source Control, Extensions, Account
Explorer toolbarNew File, New Folder, Refresh, Collapse All
Source Control panelAdd, Discard, Check, Git Branch
Editor & panelsSplit Horizontal, Split Vertical, Go to File, Compare Changes
Debug toolbarDebug Start, Debug Pause, Debug Step Over
Status bar & notificationsError, Warning, Info, Bell, Bell Dot, Sync
General UITree Item Expanded, List Tree, List Flat, Toolbar More

Choosing a System Icon Theme

Lynx (Material) Icons is the recommended choice for most users. Its Material Design language pairs cleanly with all eight Lynx color themes and produces a unified, polished look across the entire VS Code interface. Use Lynx (Test) Icons if you prefer an alternate glyph style or are actively contributing to the icon system and want a visible indicator that a test set is loaded.

Font-Based Delivery

Unlike the file/folder icon themes (which use individual SVG files), system icons are embedded in a WOFF font. Each icon is mapped to a Unicode private-use character, and VS Code renders the correct glyph at any size without pixelation.
src/assets/woff/
├── lynx-material-icons.woff   # Font for Lynx (Material) Icons
└── lynx-test-icons.woff       # Font for Lynx (Test) Icons
The font character mappings are declared in src/icons/icon-system/lynx-material-icon.json and src/icons/icon-system/lynx-test-icon.json respectively, each referencing the shared font file and defining hundreds of fontCharacter entries.

Build docs developers (and LLMs) love