Flow Icons

🌼 A brand new premium icon pack for VSCode

💎 IMPORTANT 💎
The extension contains only demo icons.
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 | sky | pink | purple | teal | gray | brown
  "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 or replace 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": "",
  // Add or replace an icon for a specific file name
  "tailwind.css": "tailwindcss",
  // Remove the icon for a specific file name
  // (If the file maps to a language, language icon will be used)
  "package.json": ""
},

Folder associations

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

Language associations

"flow-icons.languages.associations": {
  // Add or replace an icon for a language
  "languageId": "iconName",
  "json5": "json",
  // Remove the icon for a language
  "jsonc": ""
}

Toggle icon packs

"flow-icons.activeIconPack": {
  "angular": false,
  "nest": true,
  "next": true
},

The default value is shown above. For more details about the packs, please see settings.json.

You can set the value to false if you want to disable it. (The angular and nest packs will conflict if you enable both).

⚠️ Quickly see all available packs here.

Command List

Requesting Icons

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

brought to you by thang-nm