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-interceptors | ![]() |
folder-ios | ![]() |
folder-layout | ![]() |
folder-mail | ![]() |
folder-middleware | ![]() |
folder-models | ![]() |
folder-modules | ![]() |
folder-orange-code | ![]() |
folder-orange-outline | ![]() |
folder-orange | ![]() |
folder-prisma | ![]() |
folder-pipes | ![]() |
folder-purple-code | ![]() |
folder-purple-outline | ![]() |
folder-purple | ![]() |
folder-providers | ![]() |
folder-red-code | ![]() |
folder-red-outline | ![]() |
folder-red | ![]() |
folder-reducer | ![]() |
folder-router | ![]() |
folder-selector | ![]() |
folder-services | ![]() |
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 | ![]() |
func | func |
fresh | ![]() |
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 | ![]() |
![]() |
|
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-types | ![]() |
ts-test | ![]() |
ts | ![]() |
tsconfig | ![]() |
turborepo | ![]() |
twig | ![]() |
unocss | ![]() |
v | ![]() |
vanilla-extract | ![]() |
vercel | ![]() |
video | ![]() |
visual-studio | ![]() |
vite | ![]() |
vitest | ![]() |
vue | ![]() |
webpack | ![]() |
xml | ![]() |
yaml | ![]() |
yarn | ![]() |
zig | ![]() |
zip | ![]() |