vscode-symbols

A file icon theme for VS Code
GitHub
403
Created 3 years ago, last commit 13 days ago
54 contributors
282 commits
Stars added on GitHub, month by month
2
3
4
5
6
7
8
9
10
11
12
1
2024
2025
Stars added on GitHub, per day, on average
Yesterday
+1
Last week
+0.4
/day
Last month
+0.2
/day
Last 12 months
+0.3
/day
README

Symbols

A file icon for VS Code

Preview of extension

Contributing

If you'd like to contribute to this extension, please take a look at the issues or create a new one. If you'd like to create a new icon, please reference the Symbols - File Icon Figma file, you can make a copy or reference the styles used (tailwind). Please try to limit your colors to the ones used in existing icons before choosing a different color style.

When submitting a PR, please ensure you've tested the extension locally and ensure that your new icons appear correctly in the file tree view with your new file extension. Include a screenshot of your proposed icon in your PR.

Generating Icon Previews

Before submitting a PR, please run the preview generation script to update the icon previews:

npm run generate-previews

This script will update the preview markdown files with your new icons. Make sure to commit these changes along with your PR.

Configuration

You can configure which folders and files icons are displayed by using the following settings:

Folders

"symbols.folders.associations": {
    "{folder name}": "{icon name}"
}

And here is an example using this setting:

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

Files

"symbols.files.associations": {
    "{file name}": "{icon name}"
}

And here is an example:

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

Note: For file names, you can use * to match all files with a specific file extension.

Icon Preview

You can preview the icons by reading the the preview.md file.

React Symbols

Pablo Hdez has graciously created React-Symbols (pheralb/react-symbols) to allow you to embed Symbol icons for your React projects.