Using cross browser retina/high resolution media queries for icons (on hover, focus, before/after pseudo elements):
// Retina @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .spritesheet, #faqs-accordion button.accordion h3::after { content: '' !important; background-image: url(../images/yorkregion_spritesheet@2x.png) !important; background-size: 800px !important; } #faqs-accordion button.button-bg:after { content: '' !important; background: url(../images/menu-items-bg@2x.png) no-repeat !important; background-size: 50px 52px !important; width: 50px !important; height: 52px !important; } #faqs-accordion button.accordion:hover:after, #faqs-accordion button.accordion:focus:after { content: '' !important; background: url(../images/menu-items-bg-dark@2x.png) no-repeat !important; background-size: 50px 52px !important; width: 50px !important; height: 52px !important; } }