Pierre Icons for VS Code
File icon theme for VS Code with three tiers and per-icon palette colors.
Themes
The extension ships three icon themes, each building on the last:
- Pierre Icons (Minimal) -- file, folder, text, and image icons only. Monochrome.
- Pierre Icons -- adds language icons (JS, TS, CSS, HTML, Python, Go, Rust, Ruby, Swift, Bash, Markdown) plus font, SVG, JSON, and git. Monochrome.
- Pierre Icons (Complete) -- adds framework, tooling, and config icons (React, Vue, Svelte, Astro, Docker, Tailwind, ESLint, Prettier, npm, Vite, webpack, and more). Uses per-icon colors from the Pierre palette.
Color system
Colors come from the Pierre palette, using level 400 for dark themes and 600 for light themes -- the same scale used for syntax tokens in the Pierre color theme.
Minimal and default tiers are monochrome (gray 400 / 800). The complete tier applies per-icon colors, with two modes:
- Single color (
color(hue)) -- one palette hue for all paths. Duo-tone icons get visual weight from the opacity attribute baked into the SVG's background path.
- Dual color (
duoColor(fg, bg)) -- separate palette hues for foreground and background paths. Requires SVG paths to have class="fg" and class="bg" attributes (set in Figma). The build injects a <style> block to override bg fills via CSS.
Build
npm run build
This reads source SVGs from svgs/, optimizes them with SVGO, stamps dark/light fill colors, and writes the output to icons/. Three theme JSON files are generated: theme-minimal.json, theme-default.json, and theme-complete.json.
For development, watch mode rebuilds on SVG changes:
npm run watch
Load locally
Run from source (VS Code)
- Open this folder in VS Code.
- Run
npm run build.
- Press
F5 to launch an Extension Development Host.
- Choose one of the Pierre Icons themes from File Icon Theme.
Package a VSIX
npm run package
Then install the generated .vsix in VS Code or Cursor.
Adding icons
- Add or update SVGs in
svgs/. For duo-tone icons, use class="bg" and class="fg" on paths.
- Add an entry to the appropriate tier array in
scripts/build-icon-theme.mjs:
// Single color
{ name: "react", color: color(palette.cyan), fileExtensions: ["jsx", "tsx"] }
// Dual color (fg + bg)
{ name: "lang-python", color: duoColor(palette.blue, palette.yellow), fileExtensions: ["py"] }
// Monochrome (no color property)
{ name: "font", fileExtensions: ["ttf", "otf", "woff", "woff2"] }
- Run
npm run build.
| |
