CraftingStudioPro Developer Icons

A file icon theme that uses the original technology marks developers recognise, with a consistent local system for generic files and folders. Brand paths come from Simple Icons, are recoloured for the selected CraftingStudioPro palette, and are checked for legibility at 16px — the size the explorer actually renders.

Features

Original marks, one file system. Technology logos keep their recognisable geometry while generic files and folders share one 24px grid:

Family	Silhouette
Languages & formats	Original technology mark
Frameworks	Original framework mark
Tools	Original tool mark
Cloud providers	Original cloud mark
Databases	Original database mark
Files	Folded-corner sheet with a small emblem
Folders	Folder silhouette with an emblem, closed and expanded

At 16px the family lands first and the detail resolves as the icon grows. That is deliberate, and it is why the set stays readable in a dense explorer.

Theme-matched variants. VS Code file icon themes are static SVG mappings, so the extension ships one recoloured variant for every CraftingStudioPro color theme — fourteen of them. While this icon pack is active, changing from Deep Ocean to Night Owl or Parchment switches the matching file icons automatically.

No emoji, no mystery artwork. Brand marks are sourced from Simple Icons and documented in THIRD_PARTY_NOTICES.md; generic file and folder geometry remains maintained in this repository.

Expanded folders keep their emblem. Opening a directory changes its state, not its identity — the same mark stays in the same place on the open silhouette, so you never lose your place while scanning.

Programming Languages

JavaScript · TypeScript · Python · Java · Kotlin · Swift · Go · Rust · C · C++ · C# · PHP · Ruby · Dart · Lua · R · Shell · Bash · PowerShell · SQL · GraphQL · Zig · Elixir · Haskell · Scala · Clojure · Julia · Solidity · Protocol Buffers · Perl · Erlang · OCaml · F# · Nim · Crystal · Gleam

Plus the markup and data formats that live alongside them: HTML · CSS · SCSS · Sass · Less · JSON · YAML · XML · TOML · Markdown · MDX

Language icons

Frameworks

React · Next.js · Vue · Nuxt · Angular · Svelte · SvelteKit · Astro · Vite · Node.js · Bun · Deno · Express · NestJS · Tailwind CSS · Electron · Tauri · Remix · SolidJS · Qwik · htmx · Three.js

Backend and mobile: Laravel · Django · Flask · FastAPI · Ruby on Rails · Spring · .NET · Flutter · Expo

Framework icons

Tools

Git · GitHub · GitHub Actions · GitLab · Bitbucket · Docker · Kubernetes · Ansible · npm · pnpm · Yarn · Webpack · Rollup · esbuild · Babel · Gradle · Apache Maven · Turborepo · Nx · ESLint · Biome · Prettier · Jest · Vitest · Cypress · Playwright · Storybook · Postman · Swagger · OpenAPI · Sentry · Makefile · Jenkins

Cloud

AWS · Azure · Google Cloud · Cloudflare · Vercel · Netlify · DigitalOcean · Terraform · Railway · Fly.io · Render

Tool and cloud icons

Databases

PostgreSQL · MySQL · MariaDB · MongoDB · Redis · SQLite · Supabase · Firebase · Prisma · Drizzle · Elasticsearch · ClickHouse · DuckDB · Neo4j · CockroachDB · PlanetScale

Database icons

File Icons

288 extensions and 317 exact filenames resolve to a dedicated icon, including everything you touch daily:

Source — .js .jsx .ts .tsx .mjs .cjs .mts .cts .py .go .rs .java .kt .php .rb .swift .dart .lua .c .cpp .cs .m .mm .vb .pas
Systems and hardware — .asm .nasm .s .inc .v .sv .vhd .ino .wat .glsl .hlsl .wgsl .metal
Web — .html .css .scss .sass .less .vue .svelte .astro .pug .ejs .hbs .twig .liquid
Data & config — .json .jsonc .yaml .yml .xml .toml .csv .env .ini
Database — .sql .prisma .db .sqlite
Infrastructure — Dockerfile docker-compose.yml Makefile Jenkinsfile .tf .tfvars .hcl .nix
Repository — .gitignore .gitattributes .editorconfig LICENSE README.md CHANGELOG.md
Tooling manifests — package.json tsconfig.json vite.config.ts eslint.config.js playwright.config.ts Cargo.toml go.mod pyproject.toml pom.xml and the lockfiles for npm, pnpm, Yarn and Bun
Media & archives — images, video, audio, fonts, archives, certificates, binaries
Documents — spreadsheets, documents, presentations, PDFs, design files, 3D models, disk images, diffs

File icons

Folder Icons

229 folder names map to 106 distinct folder icons, each with a closed and an expanded variant:

Structure — src app apps packages components pages layouts features widgets screens client server shared core domain modules
Code — utils lib helpers services api routes controllers models entities repositories middleware hooks plugins extensions constants workers events types schemas store stores state
Go — cmd pkg internal
Assets — public assets static images icons fonts styles content locales data notebooks
Quality — tests __tests__ mocks benchmarks coverage .storybook stories
Build and infra — scripts dist build out generated infra proto .devcontainer .changeset database db config secrets
Product surfaces — auth admin emails notifications payments analytics integrations themes templates snippets queries policies commands handlers functions graphql
Distribution — cli sdk desktop
Mobile — android ios
Housekeeping — docs examples logs temp tmp cache node_modules vendor .github .vscode .git

Common aliases resolve to the same icon, so img and images, spec and tests, typings and types, i18n and locales, jobs and workers, k8s and infra, frontend and client, .next and cache all behave the way you would expect.

Folder icons

Screenshots

The galleries above are rendered from the shipped SVGs at 16, 20, 24 and 32px, on both a dark and a light sidebar — the same images the design review uses. Nothing in them is redrawn for marketing.

Installation

From the Extensions view (Ctrl+Shift+X / Cmd+Shift+X), search for CraftingStudioPro Developer Icons and click Install.

Or from the command line:

code --install-extension craftingstudiopro.csp-icons

Then activate it — Ctrl+Shift+P → Preferences: File Icon Theme → CraftingStudioPro Developer Icons — or set it directly:

{
  "workbench.iconTheme": "craftingstudiopro-icons"
}

The extension also contributes a matching icon variant for every CraftingStudioPro color theme. While this icon pack is active, switching between Tokyo Night, Deep Ocean, Espresso, Sunset, Parchment and the other palettes selects the matching variant; choosing another icon pack leaves that choice alone.

Pair with CraftingStudioPro Themes, which shares the same design language:

{
  "workbench.colorTheme": "CraftingStudioPro Tokyo Night",
  "workbench.iconTheme": "craftingstudiopro-icons"
}

Feedback & Issues

Missing a file type, or got an icon that reads wrong at 16px? Both are worth reporting — the second one especially, since small-size legibility is the whole point of the grid.

Issues: https://github.com/DevVoxelv2/craftingstudiopro-vscode/issues
Discussions: https://github.com/DevVoxelv2/craftingstudiopro-vscode/discussions
Website: https://craftingstudiopro.dev

CraftingStudioPro Developer Icons