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-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

Name	Preview
angular
astro
audio
babel
brackets-blue
brackets-gray
brackets-green
brackets-orange
brackets-purple
brackets-red
brackets-sky
brackets-yellow
c
capacitor
clojure
code-blue
code-gray
code-green
code-orange
code-purple
code-red
code-sky
code-yellow
coffeescript
coldfusion
cplus
csharp
csv
cypress
dart
database
deno
docker
document
drawio
dts
editorconfig
elixir
erlang
eslint
exe
firebase
font
fsharp
gear
git
github
go-mod
go
gradle
graphql
gulp
h
haml
http
hugo
ignore
image
ionic
java
jenkins
jest
js-test
js
julia-markdown
julia
kotlin
laravel
license
liquid
lua
markdown
mdx
nest
netlify
next
nix
node
nodemon
notebook
npm
nunjucks
patch
perl
php
pnpm
postcss
prettier
prisma
proto
pug
pulumi
puzzle
python
r
react-test
react-ts
react
rescript-interface
rescript
robot
ruby
rust
sass
sbt
scala
shell
storybook
stylus
supabase
svelte
svg
swift
tailwind
terraform
tex
text
ts-test
ts
tsconfig
turborepo
v
vanilla-extract
vercel
video
visual-studio
vite
vue
webpack
xml
yaml
yarn
zig