Small piece of JavaScript to detect a retina display and exchange `.icon-class` with `.icon-retina-class` to display retina images. Note that sprites should be aligned horizontally if you use Compass due to a bug.

detection.js

<script type='text/javascript'>
  $(document).ready(function() {
    if (window.devicePixelRatio > 1) {
      $.each($("[class^=icon-]"), function() {
        var el = $(this), bp = el.css('background-position');
        el.attr('class', el.attr('class').replace('n-', 'n-retina-')).css('background-position', bp);
      });
    }
  });
</script>

example.html

<i class="icon-logo"></i>

icon.css

[class^="icon-"],
[class^="icon-retina-"] {
  /* General settings */
  width: 11px;
  height: 11px;
  line-height: 14px;
  display: inline-block;
  vertical-align: text-top;
  background-repeat: no-repeat;

   /* ie7-restore-right-whitespace */
  *margin-right: .3em;
  
  /* Width and height of the non-retina sprite */
  background-size: 930px 100px;
}

/* Individual settings for your elements */
.icon-logo, .icon-retina-logo {
  width: 80px;
  height: 20px;
}