A light/dark low contrast file icon set for VSCode that borrows from and extends Feather Icons. A minimal icon theme is also included that only differentiates files and folders.
| Name | Icon | Purpose |
|---|---|---|
| Folder |  |
Collapsed Folders |
| Folder (Open) |  |
Expanded Folders |
| File |  |
Fallback for files not decorated by another icon. In the minimal theme, it represents anything that is not a folder. |
| Settings |  |
package.json and other configuration-related files |
| Prettier |  |
.prettierrc |
| ESLint |  |
eslint configurations |
| Code |  |
Source code files (.js, .py, etc) |
| Markup |  |
.html, .xml, etc |
| Hash |  |
CSS related files (.css, .scss, etc) |
| Book |  |
.md and other documentation files |
| Package/Archive |  |
Package/archive files |
| Image |  |
Images (.svg, .png, etc) |
| Camera |  |
Snapshots (.snap) |
| Database |  |
Data files (.json, .sql) |
| Terminal |  |
.zshrc, .bashrc |
| Lock |  |
.lock |
| Info |  |
Log files |
| Git |  |
Git-related files (.gitignore) |
The dark theme shown above is Subliminal Next with custom overrides:
{
"workbench.colorCustomizations": {
"[Subliminal Next]": {
"editor.lineHighlightBackground": "#272c35",
"editorGroupHeader.tabsBackground": "#232830",
"editorGroupHeader.tabsBorder": "#1e2229",
"editorGutter.addedBackground": "#77b386",
"editorGutter.modifiedBackground": "#70aaab",
"editorIndentGuide.activeBackground": "#ffffff11",
"editorIndentGuide.background": "#ffffff08",
"editorLineNumber.activeForeground": "#5a677c",
"editorLineNumber.foreground": "#38404d",
"editorLink.activeForeground": "#74B9E9",
"scrollbar.shadow": "#0000",
"sideBar.background": "#1c2026",
"sideBar.border": "#0000",
"sideBarSectionHeader.background": "#21252c",
"statusBar.background": "#1F242B",
"statusBar.border": "#1C2026",
"statusBar.foreground": "#454f5f",
"tab.activeBackground": "#0000",
"tab.border": "#0000",
"tab.inactiveBackground": "#0000",
"textLink.activeForeground": "#A9D9F6",
"textLink.foreground": "#74B9E9",
"titleBar.border": "#0000",
"tree.indentGuidesStroke": "#fff1",
"widget.shadow": "#0005"
},
}
}The light theme shown is Ayu Light with custom overrides:
{
"workbench.colorCustomizations": {
"[Ayu Light]": {
"badge.background": "#55b4d4",
"editorGroupHeader.tabsBorder": "#eef0f1",
"editorIndentGuide.activeBackground": "#0002",
"editorIndentGuide.background": "#0001",
"gitDecoration.modifiedResourceForeground": "#55b4d4",
"gitDecoration.untrackedResourceForeground": "#96b663",
"list.activeSelectionBackground": "#cdd1d6",
"list.activeSelectionForeground": "#616a75",
"list.focusForeground": "#616a75",
"list.highlightForeground": "#55b4d4",
"list.hoverForeground": "#616a75",
"list.inactiveSelectionForeground": "#616a75",
"list.warningForeground": "#fa8d3e",
"sideBar.background": "#e3e6e8",
"sideBar.border": "#0000",
"sideBar.foreground": "#7f8994",
"sideBarSectionHeader.background": "#d8dcdf",
"statusBar.background": "#cdd1d6",
"statusBar.border": "#0000",
"statusBar.foreground": "#7f8994",
"tab.inactiveForeground": "#c5c9ce",
"terminal.ansiBlack": "#144252",
"terminal.ansiBlue": "#addbeb",
"terminal.ansiCyan": "#2985a3",
"terminal.ansiGreen": "#5cb8d6",
"terminal.ansiWhite": "#eff8fb",
"terminal.background": "#0a2129",
"terminal.foreground": "#ceeaf3",
"titleBar.activeBackground": "#cdd1d6",
"titleBar.activeForeground": "#7f8994",
"titleBar.border": "#0000",
"tree.indentGuidesStroke": "#0001",
},
}
}The title bar is hidden by using the Customize UI extension
Many thanks to @colebemis and @feathericons for inspiration.
MIT License 2019 © Chad Donohue
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent