Symbols

A file icon for VS Code

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.

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 Previews

You can choose which icons to use from the Library:

Name	Preview
folder
folder-app
folder-android
folder-assets
folder-prisma
folder-mail
folder-blue
folder-blue-code
folder-blue-outline
folder-config
folder-gray
folder-gray-code
folder-gray-outline
folder-green
folder-green-code
folder-green-outline
folder-orange
folder-orange-code
folder-orange-outline
folder-purple
folder-purple-code
folder-purple-outline
folder-red
folder-red-code
folder-red-outline
folder-sky
folder-sky-code
folder-sky-outline
folder-yellow
folder-yellow-code
folder-yellow-outline