Split images, make opacity version, LESS function. (all icons are in simple png file along with hover versions)

function.less

@img-count: 4; // you need keep count of your images
@icon-width: 40px;

.image-icon (@pos: 0) when (@pos = 1) {
  background-position-y: 0;
  &:hover, &.active {
    background-position-y: (@icon-width * -@img-count);
  }
}

.image-icon (@pos: 0) when (@pos > 1) {
  background-position-y: (-@icon-width * (@pos - 1));
  &:hover, &.active {
    background-position-y: (-@icon-width * ( @pos + @img-count - 1 ) );
  }
}

script.sh

#!/bin/bash
convert image_* -append full.png
convert full.png -channel Alpha -evaluate Divide 1.5 full_opacity.png
convert full* -append icons.png

usage.less

a.icon {
  background-image: url(../img/icons.png);
  background-repeat: no-repeat;
  background-position-x: 15px;
  &.diary {
    .image-icon(1);
  }
  &.info {
    .image-icon(2);
  }
  &.docs {
    .image-icon(3);
  }
  &.export {
    .image-icon(4);
  }
}