Длинный и горизонтальный для того, чтобы не допустить «выползания» второй иконки для пункта меню при большом увеличении шрифта. Да и так их (иконки) выравнивать по вертикали намного проще — опять же, при увеличении шрифта, никуда не поедут (если выравнивать вертикальный спрайт по высоте пункта меню, то начнутся танцы с бубном, попробуйте).

А про длину пункта меню — я специально делал большие промежутки (прозрачные) между иконками, намного больше, чем ширина сайдбара. Причём, это почти не сказывается на размере GIF.

Если сайт резиновый, то можно еще больше увеличить расстояния, в расчете на ширину сайдбара на самых-самых широких мониторах.

Надеюсь, доступно объяснил?

Вопрос напросился, а почему спрайт не вертикальный, т.е. не просто все картинки одна под другой, так вы не ограничиваете себя в длине пункта меню, и картинка весит меньше ;) А разницы по сути только вместе X-координаты — Y менять.

Мне еще очень нравится решение которое использует yandex с <i></i> вложенными в , где для i делается отрицательный маргин, и он вроде не в ссылке но кликабельный — очень удобной, я понимаю что не для вашей «зажатой по условиям» ситуации, а вообще )