Skip to content

miguelsolorio/vscode-symbols

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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:

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