Skip to content

Rnbsov/vscode-symbols

 
 

Repository files navigation

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.

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:

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