Skip to content
| Marketplace
Sign in
Visual Studio Code>Themes>Flow IconsNew to Visual Studio Code? Get it now.
Flow Icons

Flow Icons

Thang Nguyen

|
1,261 installs
| (4) | Free
🌼 A whole new icon pack for VSCode
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Flow Icons
Flow Icons

A whole new icon pack for VSCode

⚠️ IMPORTANT: to download all the icons, you need a license key.
Purchase from the link below:

Preview


💎 Get Premium Icons

To download all icons, you need a license key. You can make a payment here.
Then, go to the Extensions > Flow Icons > License Key and enter your license key.
You'll then be prompted to download the icons.

Features

  • Supports dark, light, and dim themes
  • Looks great even on non-Retina displays
  • Includes most common file and folder types
  • Offers customization options

Customization

Settings

Defaults for each setting are shown below.

{
  // Set default folder color
  // Available colors: red | orange | yellow | green | blue | pink | purple | teal | gray
  "flow-icons.folderColor": "gray",

  // Set to `true` to hide folding arrows next to folder icons.
  "flow-icons.hidesExplorerArrows": false,

  // Set to `true` to hide folder icons.
  "flow-icons.hidesExplorerFolders": false,

  // Set to `false` to only use the default folder icon.
  "flow-icons.specificFolders": true
}

To see all available options, open your settings UI and look for Extensions > Flow Icons.

Custom icon associations

Compatible with Material Icon settings, but with a difference: ** will be treated as *.

If you want to remove the icon, set the value to "".

You can see the file and folder names in the preview image or here.

File associations

"flow-icons.files.associations": {
  // Add an icon for a file extension
  "*.tss": "typescript",
  // Remove the icon for a file extension
  // (If the extension maps to a language, language icon will be used)
  "*.mdx": "",
  // Replace the icon for a file extension
  "*.ts": "video",
  // Add an icon for a specific file name
  "tailwind.css": "tailwindcss",
  // Remove the icon for a specific file name
  "package.json": "",
  // Replace the icon for a specific file name
  "changelog.md": "markdown"
},

Folder associations

"flow-icons.folders.associations": {
  // Add an icon for a folder name
  "store": "resource",
  // Remove the icon for a folder name
  "data": "",
  // Replace the icon for a folder name
  "storage": "database"
}

Requesting Icons

To request a new icon, open an issue and describe the icons you need.



brought to you by thang-nm

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft