Quill Icons

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.

Screenshots

Full icon theme

Minimal icon theme

Icon reference

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)

Themes shown

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

Credits

Many thanks to @colebemis and @feathericons for inspiration.

License

MIT License 2019 © Chad Donohue