I wanted to jump over the channel of the icon font, but it was quickly delayed by the renderer. When an icon sits inside a div that either has a percentage width or is automatically centered, the icon can be aligned to half a pixel, which will blur it.
I was in contact with Icomoon support, which pushed me to an error that said it was a Chrome feature. ( https://bugs.chromium.org/p/chromium/issues/detail?id=426333 ), unfortunately, I was able to reproduce the problem in all major browsers.
The recommendation I received was to avoid automatic margin and use only float left, which is impossible in the modern world. And even if I did, I would still encounter the width of the precentre.
Question
Is there a way to prevent blur? I think using inline-svgs would be the right option? But this view exceeds the goals of Icon Font. Or having a script that rounds everything down to whole pixels, but that also sounds extreme.
Steps to reproduce the problem
I created a 24px icon pack on Icomoon, uploaded the kit that comes with demo.html. Then I just on the main wrapper of the demo, and gave it a fixed width and a margin of 0 auto. Then, by resizing the browser, I was able to make the icons blurry or clear.
Chrome
Blur: 
Crisp: 
Firefox
Blur: 
Crisp: 
Opera
Blur: 
Crisp: 
Edge
Blur: 
Crisp:
Internet explorer
Blur:
Crisp: