vscode-icons

Bring icons to your VS Code.

IMPORTANT NOTE

As you all know, VSCode finally supports File and Folder icons in an official way. Read this great article by @chrisdias: "Rebellion. Mutiny. Revolt. Uprising." if you want to learn the history about this plugin and how finally icons landed in VSCode.

I would like to thank the VSCode team for their support during this summer (2016) in terms of migrating this extension and preparing the new contribution point (especially @aeschli for his good disposition).

I would also like to thank the whole community for their support: bringing in ideas, collaborating and making this path easy. And I would also like to stress the great help that @jens1o has provided to the project. He's amazing! And he's only 14!! :D Thanks, truly!

State of the extension

With the release of 4.0.0 version, support for old functionality has completely been removed for VSCode.

Why is this happening?

There are several motives that have led me to take this decision:

1. The main goal of this extension has been completely achieved, which was to point out the importance of having icons in VSCode.
2. VSCode 1.6.0 supports icons beyond the file explorer. See vscode#11751
3. Code Injection has its drawbacks both for the VSCode team and for me. Having to keep up with the Insiders build has become a nightmare and from time to time new recurrent issues are being created in VSCode's Github project about something being broken.
4. Code injection will be eventually not allowed.
5. Support from VSCode team is great and they're willing to hear all the suggestions from the community regarding icon themes.

Still, there's one missing point: Custom Icon associations is still not supported. They're not convinced of the value that this would bring to VSCode, so again, it's up to all of us to make the difference. I suggest that you create a Github issue with your opinions on this matter, so that the VSCode team can have a clear vision about importance of Custom Icon associations to the community (us). This is a starting point. Provide a +1 if you want the VSCode team to support this feature.

More information in #328

Finally, I also would like to ask you to raise the possible issues that you may find while using this extension into the extension's repository, not the VSCode one ;D

Thank you all for your kind support. Finally icons are here to stay (that was the main purpose of this extension). Now let's hope they get even better :D

Christmas release

@JimiC has been working hard and has built some very cool folder icons for this Christmas! Besides that, he has also transformed a huge quantity of our png icons into nicer svg icons.

As you may have notice we did a regresion regarding js and ts icons. Some of you were not happy with the official logos so we decided to keep the old ones until we can provide with the ability to customize some of the icons.

You may know that the VSCode API is not really very flexible, but the team has been thinking on a few ways to make the icon customization possible without tampering the original VSCode code.

Please, stay tuned, because we may deliver a first version of this feature soon.

Thank you all for your support! Merry Christmas!

---

Main Contributors

This project has gone far beyond it's main purpose, which was to provide icons for VSCode when the platform didn't still support them, and now it tries to provide the most complete set of icons you can find. I began this journey alone but this wouldn't have been possible without the help of many of you. Some members of the community have been strongly committed to the project and now they are part of the core team of mantainers.

Please, meet the team behind this extension:

• @jens1o
• @JimiC
• @robertohuertasm

If you're willing to collaborate with us feel free to join our Github repository. ;)

---

Installation

Some people have reported that they cannot find the extension when they insert the installation command:

ext install vscode-icons

If you're in the same position try this:

ext install icons
# or
ext install "vscode-icons"

Enable the extension

Go to File > Preferences > File Icon Theme > VSCode Icons.

(Note on OSX it is Code > Preferences > File Icon Theme > VSCode Icons.)

List of supported icons

The list is slowly growing. If you want to check what icons are currently supported take a look here. If you feel that there's some icon missing please let me know through the issues section of the Github's repo.

If you're a designer and you're willing to collaborate by showing your icons to the world you're more than welcome!! Currently, we don't have icons for the light template, so any help will be really appreciated and credit will be given to you ;D

List of supported folder icons

If you want to check which folder icons are currently supported take a look here. As usual, if you want to add an icon submit a PR or raise a Github issue.

Contributing with icons

If you're willing to create an icon just follow this few conventions:

1. We're using SVG or PNG-24 but we prefer SVG if possible.
2. 32x32
3. 2px margin (but see #195)
4. Center the icon, but lower it a pixel.
5. It must be transparent.

Preview of icons

In order to help you preview how the icon you are contributing will look in the editor, we are providing you with a tool that generates dummy folders or files of the provided icon.

The syntax follows the pattern:

npm run example -- [flag] [space separated file names | space separated folder names]

Supported flags are --all, --folders, --files.

Syntax examples:

npm run example -- --folders bower css

Hint: By omitting the use of the space separated folder names, the tool will create examples for all supported folders.

npm run example -- --files actionscript angular

Hint: By omitting the use of the space separated file names, the tool will create examples for all supported files.

npm run example -- --all

The above syntax will create examples for all supported files and folders.

Configuration

If you don't want to see the new version message every time the extension updates, then you can modify this configuration setting:

{
  "vsicons.dontShowNewVersionMessage": false
}

Building the extension's source code

If you're willing to explore the extension source code and want to make it work you should run this:

npm install -d
npm run build

Building the extension's source code via docker

Make sure that you have docker installed.

docker build -t vscode-icons .
docker run --rm -it -v $PWD/dist:/app/dist vscode-icons

All of the files will be generated in the dist folder.

Change log

You can checkout all our changes in our change log

If you feel that there's some icon missing please report it to the Github repository!

Enjoy!