The Block Icons module allows you to add icons to blocks (small images that generally appear next to block titles).

More and more themes are being developed that ship with default icons displayed next to block titles. One of this issues with this is that a theme cannot account for all the blocks a site may have enabled at any one time; especially since users can create their own, custom blocks. To get around this, users have to add CSS code to their theme to add icons to any un-supported or custom blocks.

This module exists for two reasons:

  1. To make it easier for users to add their own icons to any and all blocks on their site (without having to write additional CSS).
  2. To remove the need for block icons to be theme-dependent (i.e. users can keep their icon-block settings even when switching themes).


To use Block Icons, you'll need to tell each block what icon to use and how to display it. To do this, access the block configuration page of the block you want to add an icon to. You will see a new set of options under 'Block specific settings' (see README.txt). Configure these settings, then hit 'Save block'.

If you decided to display the block icon in a 'custom' location, you will need to add a call to the 'block_icon' theme function from your theme's block template file. To do this, add the following line of code to your theme's block.tpl.php file:

<?php print theme('block_icon', $block_icon); ?>


There are a number of ways you can customise the display of block icons:

Block classes
If you'd like to use CSS to target all blocks that have an icon, or all blocks with the icon in a specific position, you can add the following code to your block's class attribute in block.tpl.php:
<?php print $block_icon['block_class']; ?>
Override theme_block_icon()
You can override theme_block_icon() in your theme's template.php file if you'd like to output the icon differently (e.g. as an IMG tag, edit the default CSS applied to the icon, etc.). All necessary variables are made available by the $block_icon array (see README.txt).
Block-specific customisations
If you need to display icons differently depending on the type of block, you can create different block template files, then output the icon directly using the variables from $block_icon (i.e. bypass the block_icon theme function altogether). You're only limited by your imagination.

Free Icons

Smashing Magazine has a great collection of free icons available for commercial or non-commercial use. There are 100 icons in the set, and they come in 12 different colours: gCons.

Supporting organizations: 

Project information