Hi Guys,
Every time I preview a prototype in a browser (firefox, chrome or edge) all of the icons are blurry. Everything else looks good (except for the icons). I am only using the default Axure icons, and I have the latest version of Axure. I have tried this in several browsers and on 2 different (Windows 10 and 7) computers. The icons look prefect in RP, but not in a browser.
Please let me know how to fix this?
Best,
Z
Hi ZKTT,
To confirm, are you using icons from the default “Icons” widget library? Also, when you test your prototype in the browser, are you testing it on a retina screen? If you have a non-retina screen and view your icons in the browser on that screen, do they appear normal?
If possible, could you show screenshots of what you’re seeing in Axure RP versus what you see in the browser on different monitors (e.g. retina/high def versus non-retina/high def)? This will help to determine whether the issue you’re running into is similar to one that we have filed or if this is new. Thanks!
Yes, I think it is from the default icons widget library. All icons look terrible.
I’m pretty sure my second screen is not a retina display (it is pretty old).
Here is a shot from RP and the browser.
A short term fix would be to use FontAwesome, while the support team investigate.
If you install the FontAwesome font from here: http://fontawesome.io/assets/font-awesome-4.7.0.zip
Adam has a pretty good walkthrough for the rest of the steps here: https://axuredesign.wordpress.com/2015/10/27/the-best-way-to-add-font-awesome-to-axure-prototypes-2/
Good luck!
No worries!
It’s not that complicated to be honest.
Webfonts are something it’s definitely worth using.
The advantage here is that you then get to mix text with icons (in a button, for example), and then style that button (e.g. with outline and a shadow) - so you have multiple elements all contained within one widget for efficiency in moving, resizing etc.
One note for when you follow that article above: the latest FontAwesome you’ll download will be 4.7.0 so when you paste in the webfont link (https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css) replace the 4.6.3 with 4.7.0
Feel free to ask for more help if you need it!
Hmm, so I’ve taken another look at this and I’m seeing that on a non-retina/4k monitor, the icon widgets do look blurry if the browser happens to be zoomed in beyond 100%–is this the case for your browser settings?
As far as why the icons look blurry but other shapes (like a box 1 widget) don’t when zoomed in, I believe this comes down to how the widgets render in the browser. Starting in Axure RP 8.0, we started rendering some widgets (such as boxes and basic shapes) as divs in the browser, which helps them to be more clear and withstand resizing and zooms. Other widgets, however, are still rendered as PNGs. I’m seeing in the browser that the icon widgets are rendering as PNGs, which could be why they’re appearing blurry if the browser happens to be zoomed. I can make a note of this with our team!
Thanks to both of you.
No, my browser wasn’t zoomed in, but it looks like my other screen was 4K after all. 
Will the icons ever work on 4K (or higher resolution screens)?
Ah, excellent, the 4k monitor situation seems to match our filed report. I’ve gone ahead and added this thread to that case so that we can have more info on hand for investigating.
As far as explaining why certain widgets like icons are blurry and when that would change, this post here has a good description of the issue and our hope to resolve it by exporting vector shapes to SVGs instead of PNGs:
Hello Alyssa,
I am also facing same problem, I am using custom fonts in .svg format. In Axure it looks good but when I preview in browser the icons looks blurry. I am using AxureRP 8 on iMac.
Can you please let me know, how to clear the issue instead using font awesome.
BR,
danydinesh
Hi danydinesh,
Could you describe the type of monitor you’re viewing your prototype on in a little more detail (e.g. retina/non-retina, 4k or not)? Also, what zoom level would your browser happen to be set to? Do you see any difference in behavior when previewing in different browsers?
If possible, sending over some screenshots of what you’re seeing on your end would be helpful for our investigation as well. Thank you!
Hey @ZKTT,
I also had the same issue and that was because I placed SVG icons into my Axure RP 8 file and then clicked “Convert SVG to Shapes”. Don’t do that!
Just place the svg icon into your file, it will look blurry in the prototype but when you preview it in a browser they will look crystal clear.
I hope that helps!
Sarah
