qt qtoolbutton icon blurry

Question

I have a problem where the icons used on QToolButtons on the QMenu attached to the QToolButton appear blurry. I have tried different sizes 24x24, 32x32, 64x64, different formats like png and svg but it always looks strange. On the image you can see the selected action and the top action on the menu have the same icon but the one in the menu is blurry. Even the one selected is not really sharp.

Is there some specific guideline for those icons or what am I doing wrong? The second and third icon is a build in icon which is I believe 24x24 svg but I was not able to reproduce.

Maybe your icon doesn't sit on a full pixel but is slightly offset and interpolated between pixels? Try nudging the actual content of the icon to see if it gets better. Check this link http://dutchicon.com/articles/pixel-perfect — dtech, Sep 27 '16 at 20:13
I've tried that just now and it could be really somehow related though I can't tweak it to the right point. I'm using a pixel editor that snaps to pixel and if I move one pixel up the lover part of a line is blurry, when I move down the upper part is blurry. Tried also with vector images and snapping to a pixel grid but still, blurry... — Damir Porobic, Sep 27 '16 at 21:11
Your image might snap to the pixel, but Qt might be affecting the scale or position as well. Those things likely also vary across platforms and gui styles. — dtech, Sep 27 '16 at 21:18
Downloaded the `view-fullscreen` svg `24x24` image from https://github.com/KDE/breeze-icons/blob/master/icons/actions/24/view-fullscreen.svg and loaded it directly and it was blurry too. So basically loading icon like `QIcon::fromTheme( "view-fullscreen" )` is not blurry and loading it like `QIcon(":/currentWindow.svg")` is blurry. Am I maybe loading it wrong? — Damir Porobic, Sep 27 '16 at 21:26
It looks like calling `QIcon::fromTheme( "view-fullscreen" )` actually can return 3 different sizes `16x16`, `22x22` and `24x24`. I'll try to figure out today if I can set three different sizes in the resource file and just providing the same alias for all three of them. — Damir Porobic, Sep 28 '16 at 05:49
Investigated this further, it looks like when loading from theme it indeed loads the appropriate icon size, so no single size icon is used, which would explain the behavior that I'm facing. Here is a very nice explanation on how to build your own icon theme (see at the bottom): http://mithatkonar.com/wiki/doku.php/qt/icons Will check the "Explicitly build and bind icons at runtime" solution later on. — Damir Porobic, Sep 28 '16 at 07:21

score 4 · Accepted Answer · answered Sep 28 '16 at 09:40

Yes, you need to set different sizes of icons if you want them to look good under the QToolButon and in the QMenu, QT will pick up the size that fits best. One possible solution if you are using resource files could be like this:

QIcon *myQIcon = new QIcon;
myQIcon->addFile(":icon24.svg", QSize(24,24));
myQIcon->addFile(":icon16.svg", QSize(16,16));

mMyQAction->setIcon( *myQIcon );

Detailed explanation can be found here: http://mithatkonar.com/wiki/doku.php/qt/icons

qt qtoolbutton icon blurry

1 Answers1