Using icons from TFS

Recently I wanted to use some icons from the TFS user interface in a user manual that I was writing for a client. Of course there is the option to take a screenshot, but then the background is included and that didn’t look very pretty. And I like pretty ;-).

So I went looking for where those icons actually come from. I fired up the Chrome developer tools (hit F12) and poked around a bit with the inspector in the TFS web UI. There I eventually found the CSS for the build succeeded icon:


Notice the “-3696px” and “-16px”? This is a technique called CSS sprites. Essentially, that means that you take a small piece of a larger image file and show that. In this case, that larger image file is “tfs-icons.png”. And now it’s starting to get interesting… You can find this file in the directory where TFS is installed on your application tier. In my case (the default), this was “C:\Program Files\Microsoft Team Foundation Server 12.0\Application Tier\Web Services\_static\tfs\12\_content”. In there, you’ll find all icons used in the TFS web UI. Some of them are displayed using CSS sprites, others are just regular images.

Most of the icons can be found in the “tfs-icons.png” file. I used to cut out the ones I needed. Just beware you don’t distribute them as part of your own product.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s