Open-source project
miguelsolorio/vscode-symbols avatar
miguelsolorio/vscode-symbols

Symbols: a file icon theme for VS Code that lets you remap folders and files

A file icon theme for VS Code

550 stars104 forksJavaScriptMIT

At a glance

What is it?
Symbols is a file icon theme for VS Code whose distinguishing feature is configuration rather than art, with settings to associate folder names, file names, and subfolder files with your own icon choices. The icon set has been ported to React, Open VSX editors, Zed, JetBrains IDEs, and the browser.
Who is it for?
Symbols fits a VS Code user who wants a distinct icon set, and especially one whose project layout does not match the conventions the theme assumes, since the folder, file, and subfolder association settings are the point of the project rather than a side feature.
Can I use it commercially?
Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
Is it still maintained?
Yes. The repository last received commits 4 days ago.
What is it written in?
Mainly JavaScript, according to GitHub's language statistics.

Answers come from the project's GitHub data, last synced on October 22, 2026, and from our analysis. They are not legal advice.

Editorial analysis

This is an icon theme, and the theme part is the default set

Symbols is a file icon theme for VS Code, and the repository description says it is a simple file icon theme for VS Code. The package metadata makes the scope explicit. The display name is Symbols, the description is a simple file icon theme for VS Code, the categories list contains Themes, and the extensionKind is ui and workspace. The contributes section registers a single icon theme with the id `symbols`, the label Symbol Icons, and the path `./src/symbol-icon-theme.modified.json`. The repository layout backs that up, with a `file-types/` directory that presumably holds the mapping, an `src/` directory with the extension entry point and the modified theme JSON, and a `preview/` directory with generated preview files. The `_watch` flag on the icon theme entry is what makes the previews and the theme stay in step.

The three association settings are the real feature

What separates Symbols from a static icon pack is that the associations are user configurable. The README lists three setting groups. `symbols.folders.associations` maps a folder name to an icon name:

json
"symbols.folders.associations": {
    "entities": "folder-assets",
    "infra": "folder-app",
    "schemas": "folder-purple"
}

`symbols.files.associations` does the same for files, and it accepts a wildcard:

json
"symbols.files.associations": {
    "app.module.ts": "nest",
    "*.service.ts": "nest"
}

The third is nested, mapping a subfolder to a filename to an icon:

json
"symbols.subfolder.file.associations": {
    "annotation": {
        "*.java": "at",
        "LogAPICall.java": "at-blue"
    }
}

The note under the file settings says that for file names you can use `*` to match all files with a specific file extension. There is a fourth setting worth knowing about, `symbols.defaultAssociations`, which defaults to true and allows you to either use the default icons for files and folders or disable them and specify your own.

Two switches control the file tree chrome

Beyond the associations, the configuration exposes two booleans that change how the explorer looks. `symbols.hidesExplorerArrows` defaults to false and hides arrow icons in the explorer section when enabled. `symbols.hidesLogoIcons` defaults to false and hides logo icons for tool-specific files, so a project that is mostly a single framework can be flattened down to just the file type icons. These are the settings that decide whether the tree is busy or calm, and they are configured the same way as the associations, as object properties in the extension's configuration block. The activation event is `onStartupFinished`, so the theme is applied once the editor has finished starting rather than blocking the launch, and the capabilities block declares virtual workspace support and untrusted workspace support as true.

The icon set has been ported to five other places

The reach of the project is unusual for an icon theme. The README's Other Platforms and Editors section lists them. React Symbols was created by Pablo Hdez so that the Symbol icons can be embedded in React projects, and the repository is pheralb/react-symbols. For editors such as Cursor, Antigravity, or VSCodium, the extension is on Open VSX under the name `misolori/symbols`. For the Zed editor there is a maintained version, Symbols for Zed, maintained by sebastiandotdev. For JetBrains IDEs, including Android Studio, there is Symbols for JetBrains, also maintained by sebastiandotdev. And for the browser there is a symbols-browser-extension created by Jahir Fiquitiva. The practical value of that list is that a team using a mixed editor stack does not have to give up the icon set on the machines that are not running VS Code.

Contributing an icon is a Figma and a screenshot workflow

The contributing guidance is unusually concrete, which tells you the maintainer cares about the visual result rather than only the mapping. If you want to create a new icon, the README points at the Symbols File Icon Figma file, and you can make a copy or reference the styles used, which are tailwind styles. You are asked to try to limit your colors to the ones used in existing icons before choosing a different color style. When you submit a pull request, you should ensure you have tested the extension locally and that your new icons appear correctly in the file tree view with your new file extension, and you should include a screenshot of the proposed icon in the pull request. Before submitting, you run the preview generation script:

bash
npm run generate-previews

That script updates the preview markdown files with your new icons, and the README asks you to commit those changes along with the pull request. The preview markdown is also how a user inspects the whole set, since the README says you can preview the icons by reading the preview.md file.

The toolchain is small, and the extension is deliberately unopinionated

The package manifest is compact, which suits a theme. The name is `symbols`, the publisher is `miguelsolorio`, the icon is `symbols.png`, and the entry point is `./src/extension.js`. The engines field requires vscode `^1.88.0`, so a recent VS Code is needed. The root `package.json` version is 0.0.25 while the release list shows 0.0.26 published on 2026-05-30, after 0.0.25 in November 2025 and 0.0.24 in May 2025, and the last push was on 2026-10-19. The repository also carries a `biome.json` for formatting and linting, a `CHANGELOG.md`, husky hooks, and a `scripts/` directory that holds the preview generation. A version number in the zero range is normal for a theme, since the artefact is a set of icons and a mapping rather than an API with a stability promise.

Where Symbols is the wrong tool

Two limits are clear from the metadata. The first is that it is an icon theme and nothing else. The contributes block registers one icon theme, with no colour theme, no font, and no editor chrome, so if the problem you have is that the whole editor is bright at night, this does not address it and you want a colour theme instead. The second is the dependency on a maintained port. The React, Zed, JetBrains, and browser versions are separate projects by other people, and the README is explicit that they are maintained versions rather than official ones, so a port can lag behind the VS Code original or stop being updated. For the VS Code case specifically, the marketplace listing is the canonical source, and the Open VSX entry is the one for VSCodium-style builds, which is worth checking before you assume the versions match.

Editorial conclusion

Symbols fits a VS Code user who wants a distinct icon set, and especially one whose project layout does not match the conventions the theme assumes, since the folder, file, and subfolder association settings are the point of the project rather than a side feature. It is the wrong choice if you want a full colour theme, since the package is registered under the Themes category but contributes an icon theme only, and it is the wrong choice if you are on an editor without a maintained port. Before you install it, look at the preview file to see how the built-in icons map to your stack, and check the marketplace listing or the Open VSX entry for the version your editor actually supports.

Frequently asked questions

What is the Symbols extension for VS Code?

It is a file icon theme for VS Code, published as `symbols` with the display name Symbols and the label Symbol Icons. It registers an icon theme at `./src/symbol-icon-theme.modified.json` and requires a VS Code engine version of `^1.88.0`.

How do I change the icon for a specific folder in Symbols?

Use the `symbols.folders.associations` setting, which maps a folder name to an icon name, for example mapping `entities` to `folder-assets`. There is also `symbols.files.associations` for file names and `symbols.subfolder.file.associations` for files inside a given subfolder.

Can I use a wildcard when configuring Symbols file icons?

Yes. The README notes that for file names you can use `*` to match all files with a specific file extension, so a mapping like `*.service.ts` applies to every file with that extension.

Can I use the Symbols icon set in editors other than VS Code?

Yes. The README points to React Symbols for React projects, the Open VSX listing for editors like Cursor, Antigravity, and VSCodium, Symbols for Zed, Symbols for JetBrains IDEs including Android Studio, and a symbols-browser-extension for the browser.

How do I preview the Symbols icons or regenerate previews after contributing?

You can read the preview.md file in the preview directory to see the icons. When contributing, run `npm run generate-previews`, which updates the preview markdown files with your new icons, and commit those changes along with the pull request.

Official sources

  1. License: MIT
  2. miguelsolorio/vscode-symbols on GitHub
  3. Project website
  4. README
  5. Releases
Add this badge to your README

If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.

Add this badge to your README

markdown
[![Hysen Labs](https://hysenlabs.com/badge/miguelsolorio-vscode-symbols.svg)](https://hysenlabs.com/projects/miguelsolorio-vscode-symbols)

Was this useful?