Drswith/vsi-for-github

GitHub file icons powered by vscode-icons

★ 0Forks 0JavaScriptGitHub ↗Compare

README

VSI for GitHub

GitHub file icons powered by vscode-icons.

VSI for GitHub is an independently implemented Chromium Manifest V3 extension. It reads visible repository file and folder names on GitHub, resolves matching icons from the upstream vscode-icons theme and a curated set of common file-type aliases, and applies those icons locally in the page.

The browser integration is implemented in this repository. This project is not a fork of the previously published GitHub icon extensions, and it is not affiliated with Microsoft, GitHub, or the vscode-icons team.

Preview

VSI for GitHub in dark and light appearances: recognizable folder icons and file icons for Git, Markdown, mise, npm, pnpm, TypeScript configuration, and Vite

Browse your repository as usual. File and folder icons follow along as you open directories.

Watch the repository browsing demo (GIF)

Live GitHub walkthrough: browse file types in the repository root, open the public directory with CSS and JSON icons, then open scripts with JavaScript icons

Watch or download the MP4 for playback controls.

Captured from this repository on GitHub in Ego, with the unpacked extension loaded. The hero uses cropped excerpts from real light and dark screenshots; the demo records actual directory navigation. Original listing screenshot · Capture details and editable artwork.

The icon artwork comes from vscode-icons and retains its upstream terms; see THIRD_PARTY_NOTICES.md.

Current scope

  • GitHub repository file and folder rows.
  • Filename and extension matching from the upstream theme.
  • Light and dark icon variants, with unknown files falling back to the upstream default icon.
  • One Manifest V3 build for Chrome, Edge, and Brave.
  • No background service worker, analytics, remote code, or extra browser API permissions.

The extension currently targets github.com repository pages. Other websites and GitHub surfaces such as search results and pull request diffs are outside the first implementation.

Build

Requirements: mise. Run mise install at the repository root to install Node.js 24 and pnpm 12.4.1 from mise.toml.

mise exec -- pnpm install
mise exec -- pnpm build
mise exec -- pnpm package

mise exec -- pnpm build writes the unpacked extension to dist/. mise exec -- pnpm package creates artifacts/vsi-for-github-<version>.zip from that directory.

To update the bundled icon data from the latest vscode-icons GitHub Release:

mise exec -- pnpm sync:upstream
mise exec -- pnpm typecheck
mise exec -- pnpm build

The sync workflow runs on a schedule and creates a reviewable pull request when the upstream release changes. It validates the upstream license statement and records the release, package checksum, every bundled SVG path, and each SVG checksum before opening that pull request.

Load in a browser

Build the project, then enable developer mode on the browser's extension page and select Load unpacked with dist/:

  • Chrome: chrome://extensions
  • Edge: edge://extensions
  • Brave: brave://extensions

For end-user installation and update behavior, see docs/DISTRIBUTION.md. No extension store listing is published yet.

Privacy and licensing

The extension uses visible file and folder names only to select icons. It processes them locally and does not collect, store, or transmit them. See the privacy policy.

Project source code is licensed under Apache-2.0. Bundled vscode-icons artwork retains the upstream terms: the upstream project identifies icons as CC BY-SA 4.0 and branded icons as subject to their respective copyright terms. The VSIX does not identify branded assets individually; see THIRD_PARTY_NOTICES.md and the generated asset inventory before preparing a store submission.

The project name refers to the vscode-icons icon set as an upstream data source. “VSI” is the independent product brand; it does not claim an official relationship with Microsoft, GitHub, or the upstream maintainers.

Contributors

Drswith

Issues