Visual Studio Image Library

Versions: 2005, 2008, 2010

Code: vstipEnv0049

 

 

Special Note:  This tip would not have been possible without the extensive help of Donna Wallace, Senior User Experience Lead for the Developer Division, who provided all the great information you see here during an interview on how best to use the Visual Studio Image Library. 

 

 

As a developer you are always looking for images that can be used in your applications.  Visual Studio comes with a set of images to help you out.  In fact, it comes with over 2000 output files, images ready for immediate use, as well as a variety of source files which you can use to create your own images if needed. These images come from Microsoft Windows, the Office system, Microsoft Visual Studio, and other Microsoft software. 

You can find them in a .ZIP file located at “C:\Program Files\Microsoft Visual Studio <version>\Common7\VS<version>Image Library\1033”.  For example, I found my images at “C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\VS2010ImageLibrary\1033”:

 

 

Types of Files

The Visual Studio Image Library is made up of folders of both source files and output files:

 

Source files

Contain building blocks intended for use with an image editor to generate new or customize existing icons.

 

 

Output files

Typically composite images made up of a base concept with 1-3 adorners, ready for immediate use by developers.

 

 

 

Image Library Contents

Here is a description to give you an idea of what is included in the VS Image Library and what each group of images is used for:

 

 

_Common Elements

Have you ever tried to edit an existing image that is made up of several overlapping elements? Then you know how hard it is to make simple changes in an output file. In this section, each source file is made up of various sizes of each element on a transparent background. When used with an image editor which utilizes layers, such as Adobe Photoshop or Paint.NET, you can choose the size of an element that fits best with what you’re trying to do and then make adjustments by layering the pieces, moving them around without editing the bits that are in the lower layers.

 

 

When the final image is composed just the way you like it, you can then flatten and save the file in a usable format such as .ico, .bmp or .png. A typical use of source files would be to take an existing image and add an adorner from the _Common Elements source files, such as adding a “new” star to the upper left to indicate a command that creates a new item of that base type:

 

 

 

Actions

The actions folder set contains output file images that represent verbs. Most commands are verbs so if you are building a toolbar or ribbon you would find most of those images in the Actions folder. In the Visual Studio Image Library they have separated out the Actions images by format (24bit, 32bit, .ico and .png), size (16x16, 24x24, 32x32) and style (Office/VS, DataTools, Windows Vista and WindowsXP).

 

 

Use the format that works best within your code; 24bit .bmp uses a fuchsia color which you will map to the background color of your UI so as appear to have a transparent background; 32bit .bmp contains a transparent background although in File Explorer it appears black, and both .ico and .png have transparent backgrounds as well. Also, each style is illustrated differently, so generally you will want to choose one style and stay consistent, not mixing different styles in the same UI.

 

 

 

Animations

This folder contains a few of the common animations that you see in Windows and are used in dialogs or other UI to indicate that a process is underway. There are both .avi and .gif formats for most of the animations; which format you use will be determined by which one is best supported by the technology you’re using for your UI.

 

 

 

Annotations_Buttons

The Annotations_Buttons folder contains images for notifications, simple actions such as expand/collapse, or to describe the state of an object or process such as running, paused or offline. This group of files is also separated out by format (24bit .bmp, .ico and .png) as well as style. Notice that the Windows Vista .ico annotations contain the full range of sizes that can be viewed in the File Explorer and will appear correctly as determined by the size needed by your UI.

 

 

 

Objects

Objects are output image files representing nouns. Because they represent objects, the most common usage for these files is in treeviews, listviews or containers such as a toolbox. When used in this way these images give the user a way to scan down a list of elements and identify types of objects without needing to read the name of the item. There are times in which objects can also represent commands, such as to create a new object of that type (New File) or to launch UI related to that object (a stopwatch image used to indicate Start Timer).

 

 

You will also find a wide variety of sizes and colors of various flags, arrows, +/- signs, etc, in the Windows Vista .png folder which can be used for a wide variety of meanings. Generally Object images are used as base elements when creating a new compound icon. Base elements augmented by annotations or other actions/object images can give an indication of state or type of the base image and forms a visual language when used with variations of similar icons.

 

 

 

 

Using the Images

The images are meant to be used for their original intent.  So, for example, you can’t use the Paste image for something other than paste operations. The most important thing to remember when using these images or creating your own using the building blocks is to ensure that you are using the images consistent with the description of the image in the readme found in the folder in which you found it.:

Comments

• Anonymous
  November 14, 2010
  The image library is pretty sad.  Any other good, free, replacements or supplements?

• Anonymous
  February 11, 2011
  The comment has been removed

• Anonymous
  March 07, 2012
  What is the exact licensing consideration of these images? I'm a C++ (VS) developer who works now on an open source Java project and I wonder if I can use some of these images.

• Anonymous
  March 11, 2012
  Hello Tocsa :) The I am not 100% sure but did find a thread where apparently our legal department addressed the issue: connect.microsoft.com/.../visual-studio-image-library-license I'll repeat the quote here: === "Examining the license for VS2010 ultimate I see the following provision which explicitly grants distribution rights and does not limit the format to installed applications, but does in some instances overlay specific usage restrictions (see MSDN article) that show up in the main categories and generally apply to usage context meaning: “Image Library. You may copy and distribute images and animations in the Image Library as described in the software documentation. You may also modify that content. If you modify the content, it must be for use that is consistent with the permitted use of the unmodified content.” Therefore the official word is that the VS license covers our terms, which has no restriction against web applications as long as the images are used as described in the readme's in each folder of the library. === Not sure how helpful the legal language is there but it does provide some context.  Hope it helps.