Symbols

A file icon for VS Code

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.

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

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

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

You can choose which icons to use from the Library:

Preview

Name	Preview
folder-android
folder-actions
folder-angular
folder-app
folder-assets
folder-auth
folder-blue-code
folder-blue-outline
folder-blue
folder-config
folder-context
folder-core
folder-database
folder-drizzle
folder-effects
folder-facade
folder-firebase
folder-github
folder-gray-code
folder-gray-outline
folder-gray
folder-green-code
folder-green-outline
folder-green
folder-helpers
folder-images
folder-intefaces
folder-ios
folder-layout
folder-mail
folder-middleware
folder-models
folder-modules
folder-orange-code
folder-orange-outline
folder-orange
folder-prisma
folder-purple-code
folder-purple-outline
folder-purple
folder-red-code
folder-red-outline
folder-red
folder-reducer
folder-router
folder-selector
folder-shared
folder-sky-code
folder-sky-outline
folder-sky
folder-supabase
folder-target
folder-tina
folder-utils
folder-vercel
folder-yellow-code
folder-yellow-outline
folder-yellow
folder
angular-component
angular-service
angular
astro
audio
babel
biome
brackets-blue
brackets-gray
brackets-green
brackets-orange
brackets-purple
brackets-red
brackets-sky
brackets-yellow
bun
c
capacitor
clojure
cloudflare-workers
cmake
code-blue
code-gray
code-green
code-orange
code-purple
code-red
code-sky
code-yellow
coffeescript
coldfusion
contentlayer
cplus
crystal
csharp
csv
cucumber
cypress
dart
database
deno
docker
document
drawio
drizzle
dts
dune
earthfile
editorconfig
elixir
erlang
eslint
exe
expressive-code
firebase
font
fsharp
gatsby
gear
gif
git
github
gleam
go-mod
go
gradle
graphql
gulp
h
haml
haskell
http
hugo
i18n
ignore
image
ionic
java
jenkins
jest
js-test
js
julia-markdown
julia
keystatic
knip
kotlin
laravel
license
liquid
lock
lua
lunaria
markdoc
markdown
mdx
minecraft
nest
nest-controller
nest-service
netlify
next
nix
node
nodemon
notebook
npm
nunjucks
nuxt
ocaml
panda
patch
pdf
perl
php
pkl
pnpm
postcss
prettier
prisma
proto
pug
pulumi
puzzle
python
r
razor
react-test
react-ts
react
redux-actions
redux-effects
redux-facade
redux-reducer
redux-selector
rescript-interface
rescript
robot
rome
ruby
rust
sanity
sass
sbt
scala
severless
shell
solidity
storybook
stylelint
stylus
supabase
svelte
svelte-ts
svg
svx
swc
swift
tailwind
target
terraform
tex
text
ts-test
ts
tsconfig
turborepo
twig
unocss
v
vanilla-extract
vercel
video
visual-studio
vite
vitest
vue
webpack
xml
yaml
yarn
zig
zip