OpenBase Icons

A VS Code file icon theme inspired by the OpenBase color palette — deep navy backgrounds with purple-to-pink accent gradients.

Color Palette

Role	Color	Used for
Purple	`#b44fff`	C#, .sln, .csproj, `src/`
Pink	`#ff3fa4`	TSX, SCSS, GraphQL, `test/`, `components/`
Blue	`#6ea6ff`	TypeScript, CSS, Python, Docker
Yellow	`#ffcc66`	JavaScript, Markdown, package.json, `node_modules/`
Teal	`#00d4aa`	JSON, YAML, SQL, Go, `dist/`
Green	`#3dd68c`	ENV, Shell scripts, lock files
Orange	`#ff8c5a`	HTML, XML, Rust, `.git/`
Light Purple	`#c878ff`	SVG, images, `assets/`

Icon	Extensions / Files
TypeScript	`.ts`
TSX	`.tsx`
JavaScript	`.js`, `.mjs`, `.cjs`
JSX	`.jsx`
JSON	`.json`, `.jsonc`
HTML	`.html`, `.htm`
CSS	`.css`
SCSS	`.scss`, `.sass`
LESS	`.less`
Markdown	`.md`, `.mdx`
C#	`.cs`
SQL	`.sql`
XML	`.xml`
YAML	`.yml`, `.yaml`
Shell	`.sh`, `.bash`, `.zsh`, `.fish`, `.ps1`
Python	`.py`
Rust	`.rs`
Go	`.go`
Vue	`.vue`
GraphQL	`.graphql`, `.gql`
HTTP	`.http`, `.rest`
Docker	`Dockerfile`, `docker-compose.yml`
ENV	`.env`, `.env.*`
Package	`package.json`
Lock	`package-lock.json`, `yarn.lock`, `pnpm-lock.yaml`
Config	`tsconfig.json`, `.eslintrc`, `.prettierrc`, `vite.config.*` …
Image	`.png`, `.jpg`, `.gif`, `.webp`, `.ico`
SVG	`.svg`
Project	`.csproj`, `.fsproj`, `.vbproj`
Solution	`.sln`, `.slnx`
Text	`.txt`, `.log`

Folder	Names
`src/`	`src`, `source`, `app`, `lib`
`node_modules/`	`node_modules`
`dist/`	`dist`, `build`, `out`, `output`, `target`, `bin`, `publish`
`test/`	`test`, `tests`, `__tests__`, `spec`, `__mocks__`, `e2e`
`.git/`	`.git`
`config/`	`config`, `configs`, `.config`, `settings`
`assets/`	`assets`, `public`, `static`, `images`, `img`, `fonts`, `media`, `icons`
`components/`	`components`, `pages`, `views`, `layouts`, `widgets`

Search for OpenBase Icons in the Extensions panel (Ctrl+Shift+X).

Ctrl+Shift+P → Preferences: File Icon Theme → OpenBase Icons