Interface icons

Interface icons replace symbols in Lomi buttons and other controls. Select them in Settings > Themes > Interface icons, independently of colors and file icons.

Start with a working font

Open Interface icons.
Choose Create icon theme or Duplicate on Lomi interface icons.
In the opened folder, change name in theme.jsonc and definitions in icons.json.
Save the files, choose Refresh, then Use theme on your copy.

The starter includes a working font and its license. Open icon definitions opens the files’ folder; it is not a graphical icon editor. Edit a local copy because plugin packages are read-only.

Complete small package

examples/plain-interface-icons contains these documents, lucide.woff2 and LICENSE.txt. Copy the whole folder. Its five definitions use the Lucide font; other controls use built-in icons.

theme.jsonc:

{
  "version": 2,
  "name": "Plain interface icons",
  "iconTheme": {
    "kind": "product",
    "path": "icons.json"
  }
}

icons.json:

{
  "fonts": [
    {
      "id": "lomi-lucide",
      "src": [
        {
          "path": "lucide.woff2",
          "format": "woff2"
        }
      ],
      "weight": "normal",
      "style": "normal"
    }
  ],
  "iconDefinitions": {
    "terminal": {
      "fontCharacter": "\ue181",
      "fontId": "lomi-lucide"
    },
    "search": {
      "fontCharacter": "\ue151",
      "fontId": "lomi-lucide"
    },
    "settings-gear": {
      "fontCharacter": "\ue154",
      "fontId": "lomi-lucide"
    },
    "add": {
      "fontCharacter": "\ue13d",
      "fontId": "lomi-lucide"
    },
    "close": {
      "fontCharacter": "\ue1b2",
      "fontId": "lomi-lucide"
    }
  }
}

fontCharacter is a character in the bundled font, not an arbitrary icon number. JSON "\ue196" encodes a Unicode character. A literal character or a CSS-style escaped string such as "\\e196" also works if that glyph exists in the selected font. When replacing a font, use its character map.

Definition and font fields

Field	Rule
`iconDefinitions`	Map of supported identifiers to glyph definitions; up to 8192 definitions.
`fontCharacter`	Required for every interface icon; non-empty text, at most 16 characters, without control characters.
`fontId`	An ID from `fonts`; omission uses the first font. An unknown ID is an error.
`iconPath`	Not allowed for interface icons. Images are supported in file icons.
`fonts[].id`	Unique, non-empty ID, at most 128 bytes.
`fonts[].src`	1-8 local `{ path, format }` sources relative to the icon document.
`format`	`woff`, `woff2`, `truetype` for TTF or `opentype` for OTF.
`weight`, `style`, `size`	Optional string font properties. For a regular font, omit them or use `normal` for `weight` and `style`.

An interface theme requires at least one font and permits at most 32. Controls determine glyph size and inherit text color. fontColor, fontSize and fonts[].size do not affect them as they do file icons.

Supported identifiers

The first identifier is preferred; subsequent aliases are tried in order. If the theme supplies no definition, Lomi uses the listed built-in icon. This table covers the current implementation’s complete mapping.

Built-in icon	Identifiers in order
`ArrowDown`	`arrow-down`
`ArrowLeft`	`arrow-left`
`ArrowRight`	`arrow-right`
`ArrowUp`	`arrow-up`
`Camera`	`device-camera`
`CaseSensitive`	`search-case-sensitive`, `case-sensitive`
`Check`	`check`
`ChevronDown`	`chevron-down`
`ChevronLeft`	`chevron-left`
`ChevronRight`	`chevron-right`
`ChevronsDownUp`	`collapse-all`
`ChevronsUpDown`	`expand-all`
`CircleAlert`	`error`
`Circle`	`circle-outline`
`Code`	`code`
`Columns2`	`split-horizontal`
`Command`	`symbol-key`
`Copy`	`copy`
`Download`	`cloud-download`
`Ellipsis`	`more`
`ExternalLink`	`link-external`
`Eye`	`eye`
`EyeOff`	`eye-closed`
`File`	`file`
`FileCode`	`file-code`
`FileDiff`	`diff`
`FileJson`	`json`
`FilePlus2`	`explorer-new-file`, `new-file`
`FileText`	`file-text`
`Folder`	`folder`
`FolderOpen`	`folder-opened`
`GitBranch`	`git-branch`
`GitCommitHorizontal`	`git-commit`
`Globe`	`globe`
`History`	`history`
`Import`	`import`
`Info`	`info`
`Keyboard`	`keyboard`
`Layers`	`layers`
`LayoutGrid`	`layout`
`ListX`	`clear-all`
`Maximize2`	`screen-full`
`Menu`	`menu`
`Minimize2`	`screen-normal`
`Minus`	`remove`
`Monitor`	`device-desktop`
`Moon`	`moon`
`Palette`	`color-mode`
`PanelLeft`	`layout-sidebar-left`
`PanelRight`	`layout-sidebar-right`
`Pencil`	`edit`
`Pin`	`pin`
`PinOff`	`pinned-dirty`, `pin`
`Play`	`play`
`Plus`	`add`
`Power`	`power`
`Puzzle`	`extensions`
`Redo2`	`redo`
`RefreshCw`	`refresh`
`Regex`	`search-regex`, `regex`
`RotateCcw`	`discard`
`RotateCw`	`refresh`
`Save`	`save`
`Search`	`search`
`Settings`	`settings-gear`, `gear`
`ShieldCheck`	`shield`
`Smartphone`	`device-mobile`
`Square`	`primitive-square`
`SquareArrowRight`	`sign-out`
`SquareDot`	`record-small`
`SquareMinus`	`diff-removed`
`SquarePlus`	`diff-added`
`Sun`	`lightbulb`
`Terminal`	`terminal`
`Trash2`	`trash`
`Undo2`	`undo`
`WholeWord`	`search-whole-word`, `whole-word`
`WrapText`	`word-wrap`
`X`	`close`

Control-specific identifiers

These definitions take precedence for a particular control. When absent, the control uses the general identifiers above.

ID	Fallback icon
`chrome-minimize`	`Minus`
`chrome-maximize`	`Square`
`chrome-close`	`X`
`dialog-close`	`X`
`tab-close`	`X`

Scope and verification

Check search, settings, terminal, add and close controls. Change the application’s colors and verify that glyphs still inherit control colors. A missing glyph in an otherwise valid font can appear blank despite a valid definition.

The theme does not replace plugin-drawn icons, webpage contents or the separate file icon selection. Unknown identifiers do not add corresponding VS Code features. Required font loading has a timeout; a failure retains the last working appearance.

Folder import, file watching, resource limits and export work as for file icons. Use Export to VS Code and retain the font license when sharing.

Sources: product-icons.ts, IconGlyph.tsx, icons.rs.