Dota 2 Hero Icon Sprites for Webdesigners and Webmasters

The hero icons are from Valve Software's Dota 2. The sprite image is over 66% smaller in filesize than the individual icons and can be downloaded in just one HTTP request. This is highly recommended if you plan on displaying more than several different hero icons throughout your site to improve performance and reduce traffic.

Hero icons are in parity with the Dota 2 patch of January 13th, 2012: Spiritbreaker, Silencer

The only thing you have to do to use these icons is downloading the ZIP file below, upload the content of it to any directory of your webspace and include the CSS file in the header of your website (of course you would have to change the path if your HTML is not located in the same directory):

<link rel="stylesheet" href="dota_heroes.css" type="text/css" />

Then you simply have to put two classnames in a HTML container's tag i.e. DIV, LI, SPAN etc.:

<span class="dotahero32 lich"></span>

This would show up on your website like this:


Classnames of each hero can be found in the list below.

Here are the 16x16 pixel icons. Just use the same method as above and replace dotahero32 with dotahero16 in the CSS classnames.

<span class="dotahero16 lich"></span>
<span class="dotahero16 tidehunter"></span>
<span class="dotahero16 silencer"></span>
<span class="dotahero16 facelessvoid"></span>
<span class="dotahero16 huskar"></span>
<span class="dotahero16 zeus"></span>
<span class="dotahero16 tiny"></span>
<span class="dotahero16 spectre"></span>
<span class="dotahero16 drowranger"></span>
<span class="dotahero16 pugna"></span>

would be: